YUI Library Examples: Drag & Drop: Using Interaction Groups

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:


1	<div class="slot" id="t1" >1</div>
2	<div class="slot" id="t2" >2</div>
3	<div class="slot" id="b1" >3</div>
4	<div class="slot" id="b2" >4</div>
5	<div class="slot" id="b3" >5</div>
6	<div class="slot" id="b4" >6</div>
7
8	<div class="player" id="pt1" >1</div>
9	<div class="player" id="pt2" >2</div>
10	<div class="player" id="pb1" >3</div>
11	<div class="player" id="pb2" >4</div>
12	<div class="player" id="pboth1" >5</div>
13	<div class="player" id="pboth2" >6</div>
	view plain \| print \| ?

Code:


1	<script type="text/javascript">
2
3	(function() {
4
5	YAHOO.example.DDPlayer = function(id, sGroup, config) {
6	YAHOO.example.DDPlayer.superclass.constructor.apply(this, arguments);
7	this.initPlayer(id, sGroup, config);
8	};
9
10	YAHOO.extend(YAHOO.example.DDPlayer, YAHOO.util.DDProxy, {
11
12	TYPE: "DDPlayer",
13
14	initPlayer: function(id, sGroup, config) {
15	if (!id) {
16	return;
17	}
18
19	var el = this.getDragEl()
20	YAHOO.util.Dom.setStyle(el, "borderColor", "transparent");
21	YAHOO.util.Dom.setStyle(el, "opacity", 0.76);
22
23	// specify that this is not currently a drop target
24	this.isTarget = false;
25
26	this.originalStyles = [];
27
28	this.type = YAHOO.example.DDPlayer.TYPE;
29	this.slot = null;
30
31	this.startPos = YAHOO.util.Dom.getXY( this.getEl() );
32	YAHOO.log(id + " startpos: " + this.startPos, "info", "example");
33	},
34
35	startDrag: function(x, y) {
36	YAHOO.log(this.id + " startDrag", "info", "example");
37	var Dom = YAHOO.util.Dom;
38
39	var dragEl = this.getDragEl();
40	var clickEl = this.getEl();
41
42	dragEl.innerHTML = clickEl.innerHTML;
43	dragEl.className = clickEl.className;
44
45	Dom.setStyle(dragEl, "color", Dom.getStyle(clickEl, "color"));
46	Dom.setStyle(dragEl, "backgroundColor", Dom.getStyle(clickEl, "backgroundColor"));
47
48	Dom.setStyle(clickEl, "opacity", 0.1);
49
50	var targets = YAHOO.util.DDM.getRelated(this, true);
51	YAHOO.log(targets.length + " targets", "info", "example");
52	for (var i=0; i<targets.length; i++) {
53
54	var targetEl = this.getTargetDomRef(targets[i]);
55
56	if (!this.originalStyles[targetEl.id]) {
57	this.originalStyles[targetEl.id] = targetEl.className;
58	}
59
60	targetEl.className = "target";
61	}
62	},
63
64	getTargetDomRef: function(oDD) {
65	if (oDD.player) {
66	return oDD.player.getEl();
67	} else {
68	return oDD.getEl();
69	}
70	},
71
72	endDrag: function(e) {
73	// reset the linked element styles
74	YAHOO.util.Dom.setStyle(this.getEl(), "opacity", 1);
75
76	this.resetTargets();
77	},
78
79	resetTargets: function() {
80
81	// reset the target styles
82	var targets = YAHOO.util.DDM.getRelated(this, true);
83	for (var i=0; i<targets.length; i++) {
84	var targetEl = this.getTargetDomRef(targets[i]);
85	var oldStyle = this.originalStyles[targetEl.id];
86	if (oldStyle) {
87	targetEl.className = oldStyle;
88	}
89	}
90	},
91
92	onDragDrop: function(e, id) {
93	// get the drag and drop object that was targeted
94	var oDD;
95
96	if ("string" == typeof id) {
97	oDD = YAHOO.util.DDM.getDDById(id);
98	} else {
99	oDD = YAHOO.util.DDM.getBestMatch(id);
100	}
101
102	var el = this.getEl();
103
104	// check if the slot has a player in it already
105	if (oDD.player) {
106	// check if the dragged player was already in a slot
107	if (this.slot) {
108	// check to see if the player that is already in the
109	// slot can go to the slot the dragged player is in
110	// YAHOO.util.DDM.isLegalTarget is a new method
111	if ( YAHOO.util.DDM.isLegalTarget(oDD.player, this.slot) ) {
112	YAHOO.log("swapping player positions", "info", "example");
113	YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
114	this.slot.player = oDD.player;
115	oDD.player.slot = this.slot;
116	} else {
117	YAHOO.log("moving player in slot back to start", "info", "example");
118	YAHOO.util.Dom.setXY(oDD.player.getEl(), oDD.player.startPos);
119	this.slot.player = null;
120	oDD.player.slot = null
121	}
122	} else {
123	// the player in the slot will be moved to the dragged
124	// players start position
125	oDD.player.slot = null;
126	YAHOO.util.DDM.moveToEl(oDD.player.getEl(), el);
127	}
128	} else {
129	// Move the player into the emply slot
130	// I may be moving off a slot so I need to clear the player ref
131	if (this.slot) {
132	this.slot.player = null;
133	}
134	}
135
136	YAHOO.util.DDM.moveToEl(el, oDD.getEl());
137	this.resetTargets();
138
139	this.slot = oDD;
140	this.slot.player = this;
141	},
142
143	swap: function(el1, el2) {
144	var Dom = YAHOO.util.Dom;
145	var pos1 = Dom.getXY(el1);
146	var pos2 = Dom.getXY(el2);
147	Dom.setXY(el1, pos2);
148	Dom.setXY(el2, pos1);
149	},
150
151	onDragOver: function(e, id) {
152	},
153
154	onDrag: function(e, id) {
155	}
156
157	});
158
159	var slots = [], players = [],
160	Event = YAHOO.util.Event, DDM = YAHOO.util.DDM;
161
162	Event.onDOMReady(function() {
163	// slots
164	slots[0] = new YAHOO.util.DDTarget("t1", "topslots");
165	slots[1] = new YAHOO.util.DDTarget("t2", "topslots");
166	slots[2] = new YAHOO.util.DDTarget("b1", "bottomslots");
167	slots[3] = new YAHOO.util.DDTarget("b2", "bottomslots");
168	slots[4] = new YAHOO.util.DDTarget("b3", "bottomslots");
169	slots[5] = new YAHOO.util.DDTarget("b4", "bottomslots");
170
171	// players
172	players[0] = new YAHOO.example.DDPlayer("pt1", "topslots");
173	players[1] = new YAHOO.example.DDPlayer("pt2", "topslots");
174	players[2] = new YAHOO.example.DDPlayer("pb1", "bottomslots");
175	players[3] = new YAHOO.example.DDPlayer("pb2", "bottomslots");
176	players[4] = new YAHOO.example.DDPlayer("pboth1", "topslots");
177	players[4].addToGroup("bottomslots");
178	players[5] = new YAHOO.example.DDPlayer("pboth2", "topslots");
179	players[5].addToGroup("bottomslots");
180
181	DDM.mode = document.getElementById("ddmode").selectedIndex;
182
183	Event.on("ddmode", "change", function(e) {
184	YAHOO.util.DDM.mode = this.selectedIndex;
185	});
186	});
187
188	})();
189	</script>
	view plain \| print \| ?

(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>

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:

More Drag & Drop Resources:

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.