Version 3.10.3

Example: Using the Drag Shim

Jump to Table of Contents

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

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

You can see the shim by clicking the Turn Debugging On button while using the shim, the default for this example is that the shim is off.

Drag Me

Using the shim

Full source code for this example.

YUI().use('dd-ddm', 'dd-drag', 'dd-proxy', function(Y) {
        //Toggling the buttons
        Y.one('#shim').on('click', function(e) {
            var value = e.target.get('value');
            if (value == 'off' || value == 'Turn Shim On') {
                dd.set('useShim', true);
                e.target.set('value', 'on');
                e.target.set('innerHTML', 'Turn Shim Off');
                Y.one('#debugShim').set('disabled', false);
            } else {
                dd.set('useShim', false);
                e.target.set('value', 'off');
                e.target.set('innerHTML', 'Turn Shim On');
                Y.one('#debugShim').set('disabled', true);
            }
        });
        
        Y.one('#debugShim').on('click', function(e) {
            var value = e.target.get('value');
            if (value == 'off' || value == 'Turn Debugging On') {
                Y.DD.DDM._debugShim = true;
                e.target.set('value', 'on');
                e.target.set('innerHTML', 'Turn Debugging Off');
            } else {
                Y.DD.DDM._debugShim = false;
                e.target.set('value', 'off');
                e.target.set('innerHTML', 'Turn Debugging On');
            }
        });
        
        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];
        });
});