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