Date: December 22, 2006
Component: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
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:
Next, we override the
onDragDrop event for each of our four instances. In this method, we must do the following:
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 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:
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
(c)2010 Yahoo Inc.