YUI Library Examples: Drag & Drop: Drag and Drop Interaction Groups

Drag & Drop: Drag and Drop 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 © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings