documentation

Classes Files

Search

Classes

Documentation generator: JsDoc Toolkit 2.4.0
Template: Wink 1.0
Generated on:

Class wink.ux.Dnd

Implements a Drag and Drop management systems. It is based on a dnd object which will handle sources and targets. Sources are objects that can be moved over the page. Each source MUST define its own behaviour on the user drag (e.g.: creation of an avatar) Targets are objects that can react when particular sources are dropped over them (it defines its own events). A target MUST also define what will be its behaviour when a source is over it or not. When a source is dropped on a target, the dnd object fires the event defined by the target.

The dnd object can take a "zone" property to define the drag zone where to listen to touch events.

Targets must be instanciated, giving a valid DOM node id AND the event that will be fired when a source is dropped over it (see the implementation in the code sample section).
Targets must override the 'onSourceOver' and 'onSourceOut' methods. The first will be called when a source is over the target, the second one, when the source leaves the target (see the implementation in the code sample section).

Sources must be instanciated, giving a valid DOM node id (see the implementation in the code sample section).
Sources must override the 'getAvatar' method that will be called by the Dnd component when a user touches the source.
Sources should use the 'registerEvent' method to listen to the targets specific events.

Sources and targets must be added to the dnd object through the 'addSource' and 'addTarget' methods.

Class Summary
Constructor Attributes Constructor Name and Description
 
wink.ux.Dnd(properties)
Compatibility
Compatibility list Supported platforms / browsers
iOS2, iOS3, iOS4, iOS5, iOS6, Android 1.5, Android 2.1, Android 2.2, Android 2.3, Android 3.0, Android 3.1, Android 4.0, BlackBerry 6, BlackBerry 7, Bada 1.0, Windows Phone 8

Method Summary

Class Detail

wink.ux.Dnd(properties) 
var dnd = new wink.ux.Dnd();
// Define the dnd source and its methods

var source1 = new wink.ux.dnd.Source({'id': 'source1'});

source1.registerEvent('/dnd/events/dropIcon1', source1, 'drop1');
source1.registerEvent('/dnd/events/dropIcon2', source1, 'drop2');

source1.drop1 = function(params)
{
	...
}

source1.drop2 = function(params)
{
	...
}

source1.getAvatar = function()
{
	...
}

// Define the dnd targets and their methods
var target1 = new wink.ux.dnd.Target({'id': 'target1', 'event': '/dnd/events/dropIcon1'});
var target2 = new wink.ux.dnd.Target({'id': 'target2', 'event': '/dnd/events/dropIcon2'});

wink.ux.dnd.Target.prototype.over = wink.ux.dnd.Target.prototype.onSourceOver;
wink.ux.dnd.Target.prototype.out = wink.ux.dnd.Target.prototype.onSourceOut;

wink.ux.dnd.Target.prototype.onSourceOver = function()
{
	if(!this._isOver)
	{
		this.over();
		wink.byId(this.id).style.border = '1px dotted #000';
	}
} 

wink.ux.dnd.Target.prototype.onSourceOut = function()
{
	if(this._isOver)
	{
		this.out();
		wink.byId(this.id).style.border = '1px solid #fff';
	}
} 

// Add the source and the targets to the dnd component
dnd.addSource(source1);
dnd.addTarget(target1);
dnd.addTarget(target2);
Parameters:
{object} properties
The properties object
{HTMLElement} properties.zone Optional, Default: document
The drag zone where to listen to touch events
See:
Test page
Test page (puzzle)
Test page (puzzle offline)
Test page (list)

Field Detail

{integer} uId
Unique identifier
{HTMLElement} zone
The drag zone where to listen to touch events

Method Detail

  • addSource(source)
    Add a new source to the dnd object
    Parameters:
    {object} source
    The source to add
  • addTarget(target)
    Add a new target to the dnd object
    Parameters:
    {object} target
    The target to add
  • clean()
    Reset the dnd object (empty the sources and targets lists)
  • updateTargets()
    Update the targets positions. To call if the page display changes