<div class="intro">
<p>This example shows how to create multiple draggable items efficiently, still allowing for Drop Targets.</p>
</div>

<div class="example">
    {{>delegate-drop-source}}
</div>

<h3>Setting up the Delegate container and items</h3>
<p>First we need to create an HTML Node to act as the delegate container and give it some nodes to make draggable.</p>

```
{{>delegate-drop-source-html}}
```

<p>Now we give them some CSS to make them visible.</p>

```
{{>delegate-drop-source-css}}
```

<h3>Setting up the YUI Instance</h3>
<p>Now we need to create our YUI instance and tell it to load the `dd-delegate` module.</p>

```
YUI().use('dd-delegate', 'dd-drop-plugin');
```

<h3>Making the Nodes draggable</h3>
<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>

```
YUI().use('dd-delegate', 'dd-drop-plugin', function(Y) {
    var del = new Y.DD.Delegate({
        container: '#demo',
        nodes: 'li'
    });
});
```

<h3>Listening to some events</h3>
<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>

```
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
        });
    });

});
```

<h3>Adding a Drop Target</h3>
<p>Now we can add a normal Drop Target to the page.</p>

```
    var drop = Y.one('#drop').plug(Y.Plugin.Drop);
```

<p>Once that is created, we can add a `drop:hit` listener and manipulate the drag instance as we normally would.</p>

```
var drop = Y.one('#drop').plug(Y.Plugin.Drop);
drop.drop.on('drop:hit', function(e) {
    drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>');
});
```

<h3>Full Javascript Source</h3>

```
{{>delegate-drop-source-js}}
```
