YUI Library Home

Site Search (YDN & YUIBlog):

# 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.

View example in new window.

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:

<div class="slot" id="t1" >1</div> <div class="slot" id="t2" >2</div> <div class="slot" id="b1" >3</div> <div class="slot" id="b2" >4</div> <div class="slot" id="b3" >5</div> <div class="slot" id="b4" >6</div> <div class="player" id="pt1" >1</div> <div class="player" id="pt2" >2</div> <div class="player" id="pb1" >3</div> <div class="player" id="pb2" >4</div> <div class="player" id="pboth1" >5</div> <div class="player" id="pboth2" >6</div>

Code:

<script type="text/javascript"> (function() { YAHOO.example.DDPlayer = function(id, sGroup, config) { YAHOO.example.DDPlayer.superclass.constructor.apply(this, arguments); this.initPlayer(id, sGroup, config); }; YAHOO.extend(YAHOO.example.DDPlayer, YAHOO.util.DDProxy, { TYPE: "DDPlayer", initPlayer: function(id, sGroup, config) { if (!id) { return; } var el = this.getDragEl() YAHOO.util.Dom.setStyle(el, "borderColor", "transparent"); YAHOO.util.Dom.setStyle(el, "opacity", 0.76); // specify that this is not currently a drop target this.isTarget = false; this.originalStyles = []; this.type = YAHOO.example.DDPlayer.TYPE; this.slot = null; this.startPos = YAHOO.util.Dom.getXY( this.getEl() ); YAHOO.log(id + " startpos: " + this.startPos, "info", "example"); }, startDrag: function(x, y) { YAHOO.log(this.id + " startDrag", "info", "example"); var Dom = YAHOO.util.Dom; var dragEl = this.getDragEl(); var clickEl = this.getEl(); dragEl.innerHTML = clickEl.innerHTML; dragEl.className = clickEl.className; Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color")); Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor")); Dom.setStyle(clickEl, "opacity", 0.1); var targets = YAHOO.util.DDM.getRelated(this, true); YAHOO.log(targets.length + " targets", "info", "example"); for (var i=0; i<targets.length; i++) { var targetEl = this.getTargetDomRef(targets[i]); if (!this.originalStyles[targetEl.id]) { this.originalStyles[targetEl.id] = targetEl.className; } targetEl.className = "target"; } }, getTargetDomRef: function(oDD) { if (oDD.player) { return oDD.player.getEl(); } else { return oDD.getEl(); } }, endDrag: function(e) { // reset the linked element styles YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 1); this.resetTargets(); }, resetTargets: function() { // reset the target styles var targets = YAHOO.util.DDM.getRelated(this, true); for (var i=0; i<targets.length; i++) { var targetEl = this.getTargetDomRef(targets[i]); var oldStyle = this.originalStyles[targetEl.id]; if (oldStyle) { targetEl.className = oldStyle; } } }, onDragDrop: function(e, id) { // get the drag and drop object that was targeted var oDD; if ("string" == typeof id) { oDD = YAHOO.util.DDM.getDDById(id); } else { oDD = YAHOO.util.DDM.getBestMatch(id); } var el = this.getEl(); // check if the slot has a player in it already if (oDD.player) { // check if the dragged player was already in a slot if (this.slot) { // check to see if the player that is already in the // slot can go to the slot the dragged player is in // YAHOO.util.DDM.isLegalTarget is a new method if ( YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot) ) { YAHOO.log("swapping player positions", "info", "example"); YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el); this.slot.player = oDD.player; oDD.player.slot = this.slot; } else { YAHOO.log("moving player in slot back to start", "info", "example"); YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos); this.slot.player = null; oDD.player.slot = null } } else { // the player in the slot will be moved to the dragged // players start position oDD.player.slot = null; YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el); } } else { // Move the player into the emply slot // I may be moving off a slot so I need to clear the player ref if (this.slot) { this.slot.player = null; } } YAHOO.util.DDM.moveToEl(el, oDD.getEl()); this.resetTargets(); this.slot = oDD; this.slot.player = this; }, swap: function(el1, el2) { var Dom = YAHOO.util.Dom; var pos1 = Dom.getXY(el1); var pos2 = Dom.getXY(el2); Dom.setXY(el1, pos2); Dom.setXY(el2, pos1); }, onDragOver: function(e, id) { }, onDrag: function(e, id) { } }); var slots = [], players = [], Event = YAHOO.util.Event, DDM = YAHOO.util.DDM; Event.onDOMReady(function() { // slots slots[0] = new YAHOO.util.DDTarget("t1", "topslots"); slots[1] = new YAHOO.util.DDTarget("t2", "topslots"); slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots"); slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots"); slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots"); slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots"); // players players[0] = new YAHOO.example.DDPlayer("pt1", "topslots"); players[1] = new YAHOO.example.DDPlayer("pt2", "topslots"); players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots"); players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots"); players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots"); players[4].addToGroup("bottomslots"); players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots"); players[5].addToGroup("bottomslots"); DDM.mode = document.getElementById("ddmode").selectedIndex; Event.on("ddmode", "change", function(e) { YAHOO.util.DDM.mode = this.selectedIndex; }); }); })(); </script>

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

### Drag & Drop Examples:

- Basic Drag and Drop
- Using Handles
- Dragged Element on Top
- Using a Proxy Element
- Reordering a List
- Using Interaction Groups
- Custom Click Validator
- Staying in a Region
- Using the Drag Shim
- Reorder Rows with Drag and Drop (included with examples for DataTable Control)

### More Drag & Drop Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

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