Thursday, May 20, 2010

YUI: Drag & Drop

YUI 2: Drag & Drop
http://developer.yahoo.com/yui/dragdrop/

var dd1 = new YAHOO.util.DD("element1");
var dd2 = new YAHOO.util.DDProxy("element2"); //proxy element during movement
var dd3 = new YAHOO.util.DDTarget("element3"); //target for drag & drop interaction


Drag & Drop Manager
YAHOO.util.DragDropMgr (or alias YAHOO.util.DDM)

//sets the time delay between a mousedown and a
//drag event to 1200 milliseconds:
YAHOO.util.DragDropMgr.clickTimeThresh = 1200;


Interaction Groups
Each Drag and Drop object belongs to one or more interaction groups. Drag and Drop events fire only when the dragged element interacts with other objects that with which it shares a group membership. If no group is specified in the constructor, an object belongs to the "default" group

// No group specified so dd0 is assigned to the "default" group
var dd0 = new YAHOO.util.DD("elementid0");
// dd1 is a member of group1
var dd1 = new YAHOO.util.DD("elementid1", "group1");
// dd2 is a member of group2
var dd2 = new YAHOO.util.DD("elementid2", "group2");
// dd3 is a member of both group1 and group2
var dd3 = new YAHOO.util.DD("elementid3", "group1");
dd3.addToGroup("group2");
//groups can be removed via script as well:
dd1.removeFromGroup("group1");


Interesting Moments & Custom Events

var dd = new YAHOO.util.DD('demo');
dd.on('dragEvent', function(ev) {
YAHOO.log('Element is being dragged.');
}, dd, true);






No comments:

Post a Comment