5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="intro">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>This example shows how to create multiple draggable items efficiently, still allowing for Drop Targets.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass</div>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="example">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass {{>delegate-drop-source}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass</div>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Setting up the Delegate container and items</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>First we need to create an HTML Node to act as the delegate container and give it some nodes to make draggable.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass{{>delegate-drop-source-html}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Now we give them some CSS to make them visible.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass{{>delegate-drop-source-css}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Setting up the YUI Instance</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Now we need to create our YUI instance and tell it to load the `dd-delegate` module.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-delegate', 'dd-drop-plugin');
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Making the Nodes draggable</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Now that we have a YUI instance with the `dd-delegate` module, we need to instantiate the `Delegate` instance on this container and nodes.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-delegate', 'dd-drop-plugin', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var del = new Y.DD.Delegate({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass container: '#demo',
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass nodes: 'li'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass });
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass});
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Listening to some events</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>The `Delegate` object is a bubble target for the `DD.Drag` instances. So you can listen on it for all drag related events.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassYUI().use('dd-delegate', 'dd-drop-plugin', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var del = new Y.DD.Delegate({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass container: '#demo',
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass nodes: 'li'
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass });
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass del.on('drag:end', function(e) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass del.get('currentNode').setStyles({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass top: 0,
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass left: 0
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass });
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass });
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass});
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Adding a Drop Target</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Now we can add a normal Drop Target to the page.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var drop = Y.one('#drop').plug(Y.Plugin.Drop);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Once that is created, we can add a `drop:hit` listener and manipulate the drag instance as we normally would.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassvar drop = Y.one('#drop').plug(Y.Plugin.Drop);
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glassdrop.drop.on('drop:hit', function(e) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass});
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Full Javascript Source</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass{{>delegate-drop-source-js}}
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass```