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.

YUI Library Examples: Drag & Drop: Using Interaction Groups

Drag & Drop: Using Interaction Groups

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.

Interaction Mode:
1
2
3
4
5
6
1
2
3
4
5
6

Drag and Drop Interaction Groups and Affordances

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:

Copyright © 2013 Yahoo! Inc. All rights reserved.

Privacy Policy - Copyright Policy - Job Openings