YUI recommends YUI3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
This documentation is no longer maintained.
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, topslots
and bottomslots
. The grey
squares are the "slots", so #1 and #2 are the topslots
and the others are the bottomslots
.
These are YAHOO.util.DDTarget
instances, which means they can be targeted, but
not dragged.
The colored "player" squares below are draggable. #1 and #2 are in the topslots
group,
#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
information.
Markup:
Code:
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.
Copyright © 2013 Yahoo! Inc. All rights reserved.