Using interaction groups, this example demonstrates how to tie into the Drag & Drop Utility's interesting moments to provide visual affordances for the current drag operation.
The YUI Drag & Drop Utility lets you make HTML elements draggable.
All drag and drop instances are assigned to an interaction group. If a group is not
specified in the constuctor, it is assigned to the
default group. A given instance
can belong to more than one group.
In this example, we have two interaction groups,
bottomslots. The grey
squares are the "slots", so #1 and #2 are the
topslots and the others are the
YAHOO.util.DDTarget instances, which means they can be targeted, but
The colored "player" squares below are draggable. #1 and #2 are in the
#3 and #4 are in the
bottomslots group, and #5 and #6 are assigned to both groups.
When the drag starts, we use the highlight the slots that can be targeted by checking the group
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.