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