YUI Library Home

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.

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

Code for this example.

1(function() { 
2    var Dom = YAHOO.util.Dom, 
3        Event = YAHOO.util.Event; 
4 
5        Event.onDOMReady(function() { 
6            //Create the DDProxy Instance 
7            var dd = new YAHOO.util.DDProxy('demo', { 
8                //Don't resize the frame 
9                resizeFrame: false 
10            }); 
11            //On startDrag let's change the proxy's size and color 
12            dd.on('startDragEvent'function() { 
13                Dom.setStyle(this.getDragEl(), 'height''20px'); 
14                Dom.setStyle(this.getDragEl(), 'width''100px'); 
15                Dom.setStyle(this.getDragEl(), 'backgroundColor''blue'); 
16                Dom.setStyle(this.getDragEl(), 'color''white'); 
17                this.getDragEl().innerHTML = 'Custom Proxy'
18            }); 
19 
20            Event.on('shim''click'function(e) { 
21                var tar = Event.getTarget(e); 
22                var value = tar.value; 
23                if (value == 'off' || value == 'Shim Off') { 
24                    //Turn on the shim 
25                    dd.useShim = true
26                    tar.value = 'on'
27                    tar.innerHTML = 'Shim On'
28                    Dom.get('debugShim').disabled = false
29                } else { 
30                    //Turn off the shim 
31                    dd.useShim = false
32                    tar.value = 'off'
33                    tar.innerHTML = 'Shim Off'
34                    Dom.get('debugShim').disabled = true
35                } 
36            }); 
37 
38            Event.on('debugShim''click'function(e) { 
39                var tar = Event.getTarget(e); 
40                var value = tar.value; 
41                if (value == 'off' || value == 'Debug Off') { 
42                    //Turn on debugging the shim 
43                    YAHOO.util.DDM._debugShim = true
44                    tar.value = 'on'
45                    tar.innerHTML = 'Debug On'
46                } else { 
47                    //Turn off debugging the shim 
48                    YAHOO.util.DDM._debugShim = false
49                    tar.value = 'off'
50                    tar.innerHTML = 'Debug Off'
51                } 
52             
53            }); 
54        }); 
55})(); 
view plain | print | ?

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

Copyright © 2009 Yahoo! Inc. All rights reserved.

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