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>

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 Library Examples: Drag & Drop: Using Interaction Groups

Drag and Drop Interaction Groups and Affordances

Configuration for This Example

YUI Logger Output:

Drag & Drop Examples:

More Drag & Drop Resources: