Targets and Groups in YUI Drag & Drop

The YUI Drag and Drop Utility routes its events through the object associated with the element being dragged. Many times you'll find yourself, while reacting to Drag and Drop events, needing to examine both the HTML element and the Drag and Drop instance associated with the drop target. The Drag and Drop API makes this a simple task. In this example, we'll look at a specific use case in which we want to learn about the group memberships of the drop target during the onDragDrop event.

In this example, we have four draggable divs on the page. Each draggable item is a member of three groups which vary by item, but all items are members of sharedgroup — that means they'll all react to be being dragged over or dropped on one another.

We set up our draggable items and group memberships as follows:

var DD = new YAHOO.util.DD("drag1", "group1");
DD.addToGroup("group2");		
DD.addToGroup("sharedgroup");		
var DD2 = new YAHOO.util.DD("drag2", "group2");
DD2.addToGroup("group3");
DD2.addToGroup("sharedgroup");		
var DD3 = new YAHOO.util.DD("drag3", "group3");
DD3.addToGroup("group4");
DD3.addToGroup("sharedgroup");		
var DD4 = new YAHOO.util.DD("drag4", "group4");
DD4.addToGroup("group1");
DD4.addToGroup("sharedgroup");

Next, we override the onDragDrop event for each of our four instances. In this method, we must do the following:

• get a reference to the target element's Drag and Drop instance;
• look at the target instance's groups property;
• report on all of its group memberships.

Here's the method we'll use to do that. Note that we're going to report the information we find to an existing Panel on the page, setting its header and body, rerendering it, and making it visible to report on groups information for our drop target:

//the id argument is the id of the drop target
DD.onDragDrop = DD2.onDragDrop = DD3.onDragDrop = DD4.onDragDrop = function(e, id) {
	//prepare our string for the header:
	myPanel.setHeader("The drop target was " + id);
	
	//begin our body string:
	var sReport = "<strong>Group memberships for " + id + ":</strong><br>";
	
	//get reference to the DDObject for the drop
	//target:
	var DDTarget = YAHOO.util.DragDropMgr.getDDById(id);
	
	//loop through the target's group memberships:
	for (agroup in DDTarget.groups) {
		sReport += agroup + ": " + DDTarget.groups[agroup].toString() + "<br>";
	}
	
	//send report to our Panel's body area; re-render
	//and show Panel
	myPanel.setBody(sReport);
	myPanel.render();
	myPanel.show();
}

The key issue here is that we can get at (and then do anything we want with) the Drag and Drop instance associated with the target of Drag and Drop events. Here, we're doing it in the onDragDrop event; however, the same technique holds for all of the Drag and Drop events that are associated with a target:

• onDragEnter
• onDragOver
• onDragOut
• onDragDrop

Moving easily between the logic in your Drag and Drop events and the objects associated with targets of those events is an important element of your scripting toolkit for these interactions.

— Eric Miraglia, Yahoo Presentation Platform Engineering