5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="intro">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>This example shows how to create multiple draggable items efficiently.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<div class="example">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass {{>delegate-source}}
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<div id="demo">
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <li>Item #1</li>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <li>Item #2</li>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <li>Item #3</li>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <li>Item #4</li>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <li>Item #5</li>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <li>Item #6</li>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <li>Item #7</li>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <li>Item #8</li>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <li>Item #9</li>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass <li>Item #10</li>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<p>Now we give them some CSS to make them visible.</p>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass width: 200px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass#demo ul li {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass border: 1px solid black;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass background-color: #8DD5E7;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass cursor: move;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass margin: 3px;
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass list-style-type: none;
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 GlassYUI().use('dd-delegate');
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 GlassYUI().use('dd-delegate', function(Y) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var del = new Y.DD.Delegate({
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass container: '#demo',
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<h3>Adding items to the list without creating new instances.</h3>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass<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>
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav GlassY.one('#make').on('click', function(e) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass var demo = Y.one('#demo ul');
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass for (var i = 1; i < 11; i++) {
5b139d58acfcae4b1bcab5a895706abafc2a87a0Dav Glass demo.append('<li>New item #' + i + '</li>');