YUI 3.x Home -

Site Search (YDN & YUIBlog):

# YUI Library Examples: Drag & Drop: Using the Drag Shim

## Drag & Drop: Using the Drag Shim

This example shows the use of the drag shim when dragging nodes over other troublesome nodes.

View example in new window.

Try dragging the proxy element over the iframe below, in most browsers this will not happen. Now click the `Shim off` button and drag again. Now you can drag over the iframe.

You can see the shim by clicking the `Debug Off` button.

Drag Me

### Using the shim

Here is the code for this example.

    YUI().use('dd-ddm', 'dd-drag', 'dd-proxy', function(Y) {     //Toggling the buttons    Y.Node.get('#shim').on('click', function(e) {        var value = e.target.get('value');        if (value == 'off' || value == 'Shim Off') {            dd.set('useShim', true);            e.target.set('value', 'on');            e.target.set('innerHTML', 'Shim On');            Y.Node.get('#debugShim').set('disabled', false);        } else {            dd.set('useShim', false);            e.target.set('value', 'off');            e.target.set('innerHTML', 'Shim Off');            Y.Node.get('#debugShim').set('disabled', true);        }    });     Y.Node.get('#debugShim').on('click', function(e) {        var value = e.target.get('value');        if (value == 'off' || value == 'Debug Off') {            Y.DD.DDM._debugShim = true;            e.target.set('value', 'on');            e.target.set('innerHTML', 'Debug On');        } else {            Y.DD.DDM._debugShim = false;            e.target.set('value', 'off');            e.target.set('innerHTML', 'Debug Off');        }    });      var dd = new Y.DD.Drag({        //Selector of the node to make draggable        node: '#demo',        useShim: false    }).plug(Y.Plugin.DDProxy, {        offsetNode: false,        resizeFrame: false    });    dd.on('drag:start', function() {        this.get('dragNode').setStyles({            height: '20px',            width: '100px',            backgroundColor: 'blue',            color: '#fff'        });        this.get('dragNode').set('innerHTML', 'Custom Proxy');        this.deltaXY = [this.deltaXY[0] - 20, this.deltaXY[1] - 20];    });});

    YUI().use('dd-ddm', 'dd-drag', 'dd-proxy', function(Y) {

        //Toggling the buttons
        Y.Node.get('#shim').on('click', function(e) {
            var value = e.target.get('value');
            if (value == 'off' || value == 'Shim Off') {
                dd.set('useShim', true);
                e.target.set('value', 'on');
                e.target.set('innerHTML', 'Shim On');
                Y.Node.get('#debugShim').set('disabled', false);
            } else {
                dd.set('useShim', false);
                e.target.set('value', 'off');
                e.target.set('innerHTML', 'Shim Off');
                Y.Node.get('#debugShim').set('disabled', true);
            }
        });

        Y.Node.get('#debugShim').on('click', function(e) {
            var value = e.target.get('value');
            if (value == 'off' || value == 'Debug Off') {
                Y.DD.DDM._debugShim = true;
                e.target.set('value', 'on');
                e.target.set('innerHTML', 'Debug On');
            } else {
                Y.DD.DDM._debugShim = false;
                e.target.set('value', 'off');
                e.target.set('innerHTML', 'Debug Off');
            }
        });

        var dd = new Y.DD.Drag({
            //Selector of the node to make draggable
            node: '#demo',
            useShim: false
        }).plug(Y.Plugin.DDProxy, {
            offsetNode: false,
            resizeFrame: false
        });
        dd.on('drag:start', function() {
            this.get('dragNode').setStyles({
                height: '20px',
                width: '100px',
                backgroundColor: 'blue',
                color: '#fff'
            });
            this.get('dragNode').set('innerHTML', 'Custom Proxy');
            this.deltaXY = [this.deltaXY[0] - 20, this.deltaXY[1] - 20];
        });
    });

YUI().use('dd-ddm', 'dd-drag', 'dd-proxy', function(Y) { //Toggling the buttons Y.Node.get('#shim').on('click', function(e) { var value = e.target.get('value'); if (value == 'off' || value == 'Shim Off') { dd.set('useShim', true); e.target.set('value', 'on'); e.target.set('innerHTML', 'Shim On'); Y.Node.get('#debugShim').set('disabled', false); } else { dd.set('useShim', false); e.target.set('value', 'off'); e.target.set('innerHTML', 'Shim Off'); Y.Node.get('#debugShim').set('disabled', true); } }); Y.Node.get('#debugShim').on('click', function(e) { var value = e.target.get('value'); if (value == 'off' || value == 'Debug Off') { Y.DD.DDM._debugShim = true; e.target.set('value', 'on'); e.target.set('innerHTML', 'Debug On'); } else { Y.DD.DDM._debugShim = false; e.target.set('value', 'off'); e.target.set('innerHTML', 'Debug Off'); } }); var dd = new Y.DD.Drag({ //Selector of the node to make draggable node: '#demo', useShim: false }).plug(Y.Plugin.DDProxy, { offsetNode: false, resizeFrame: false }); dd.on('drag:start', function() { this.get('dragNode').setStyles({ height: '20px', width: '100px', backgroundColor: 'blue', color: '#fff' }); this.get('dragNode').set('innerHTML', 'Custom Proxy'); this.deltaXY = [this.deltaXY[0] - 20, this.deltaXY[1] - 20]; }); });

Copyright © 2009 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings