Example: Drag Delegation

Setting up the Delegate container and items

First we need to create an HTML Node to act as the delegate container and give it some nodes to make draggable.

<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>

Now we give them some CSS to make them visible.

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

Setting up the YUI Instance

Now we need to create our YUI instance and tell it to load the dd-delegate module.

YUI().use('dd-delegate');

Making the Nodes draggable

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

Adding items to the list without creating new instances.

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.

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.

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