Example: Drag Delegation with a Drop Target

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="play">

    <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>
    
    <div id="drop">Drop on me</div>
</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;
    z-index: 2;
    zoom: 1;
}
#play {
    position: relative;
    zoom: 1;
}
#drop {
    border: 1px solid black;
    background-color: #eee;
    height: 50px;
    width: 200px;
    position: absolute;
    bottom: 5px;
    right: 5px;
    zoom: 1;
}
#drop strong {
    font-weight: bold;
}
#drop.yui3-dd-drop-over {
    background-color: #ccc;
}

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', 'dd-drop-plugin');

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

Listening to some events

The Delegate object is a bubble target for the DD.Drag instances. So you can listen on it for all drag related events.

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

});

Adding a Drop Target

Now we can add a normal Drop Target to the page.

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

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

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

Full Javascript Source

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

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