#

Jump to Table of Contents

# Example: Using Drag Plugins with Delegate

This example is the same as the "Drag Delegation with Drop Target" example except we add some plugins.

- Item #1
- Item #2
- Item #3
- Item #4
- Item #5
- Item #6
- Item #7
- Item #8
- Item #9
- Item #10

Drop on me

### Adding Plugins to a Delegate instance

`DD.Delegate` provides a reference to the `dd` instance so you can plug into the underlying `dd` with `del.dd.plug()`. This allows you to use DD plugins on a Delegate instance, as well as provides the ability to write plugins for Delegate itself.

### Constrain Plugin

Here is how you would add the constrain plugin to a `DD.Delegate` instance.

    YUI().use('dd-delegate', 'dd-constrain', function(Y) {
        var del = new Y.DD.Delegate({
            container: '#demo',
            nodes: 'li'
        });

        del.dd.plug(Y.Plugin.DDConstrained, {
            constrain2node: '#play'
        });
    });

### DDProxy Plugin

Here is how you would add the dd-proxy plugin to a `DD.Delegate` instance.

    YUI().use('dd-delegate', 'dd-proxy', function(Y) {
        var del = new Y.DD.Delegate({
            container: '#demo',
            nodes: 'li'
        });

        del.dd.plug(Y.Plugin.DDProxy, {
            moveOnEnd: false,
            cloneNode: true
        });

    });

### Full Example Source

#### HTML

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

#### CSS

    #demo {
    }
    #demo ul li {
        border: 1px solid black;
        background-color: #8DD5E7;
        cursor: move;
        margin: 3px;
        list-style-type: none;
        z-index: 2;
        width: 200px;
        height: 20px;
        padding: 2px;
        zoom: 1;
    }
    #play {
        border: 1px solid black;
        zoom: 1;
        padding: 2em;
    }
    #drop {
        border: 1px solid black;
        background-color: #eee;
        height: 50px;
        width: 200px;
        float: right;
        bottom: 50px;
        position: relative;
    }
    #drop strong {
        font-weight: bold;
    }
    #drop.yui3-dd-drop-over {
        background-color: #ccc;
    }
    #example-canvas {
        position: static;
    }

#### Javascript

    YUI().use('dd-delegate', 'dd-drop-plugin', 'dd-constrain', 'dd-proxy', function(Y) {
        var del = new Y.DD.Delegate({
            container: '#demo',
            nodes: 'li'
        });

        del.on('drag:start', function(e) {
            e.target.get('node').setStyle('opacity', '.5');
        });
        del.on('drag:end', function(e) {
            e.target.get('node').setStyle('opacity', '1');
        });

        del.dd.plug(Y.Plugin.DDConstrained, {
            constrain2node: '#play'
        });

        del.dd.plug(Y.Plugin.DDProxy, {
            moveOnEnd: false,
            cloneNode: true
        });

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

    });