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.
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 | ? |
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.
Note: Logging and debugging is currently turned off for this example.
Copyright © 2009 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings