<div class="intro">
<p>This example shows how to create multiple draggable items efficiently.</p>
</div>

<div class="example">
    {{>delegate-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>

```
<div id="demo">
    <ul>
        <li>Item #1</li>
        <li>Item #2</li>
        <li>Item #3</li>
        <li>Item #4</li>
        <li>Item #5</li>
        <li>Item #6</li>
        <li>Item #7</li>
        <li>Item #8</li>
        <li>Item #9</li>
        <li>Item #10</li>
    </ul>
</div>
```

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

```
#demo {
    width: 200px;
}
#demo ul li {
    border: 1px solid black;
    background-color: #8DD5E7;
    cursor: move;
    margin: 3px;
    list-style-type: none;
}
```

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


<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', function(Y) {
    var del = new Y.DD.Delegate({
        container: '#demo',
        nodes: 'li'
    });
});
```

<h3>Adding items to the list without creating new instances.</h3>
<p>One of the benefits of using `DD.Delegate` is adding new items to the list of draggables without having to create new instances for each new item.</p>
<p>Here we are simply adding new `LI`'s to the list.  Notice that we are doing nothing with the `del` object. The items are automatically draggable since they match the `nodes` selector given to the `DD.Delegate` instance.</p>

```
Y.one('#make').on('click', function(e) {
    var demo = Y.one('#demo ul');
    for (var i = 1; i < 11; i++) {
        demo.append('<li>New item #' + i + '</li>');
    }
});
```
