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

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

(function() {
    var Dom = YAHOO.util.Dom,
        Event = YAHOO.util.Event;

Event.onDOMReady(function() {
            //Create the DDProxy Instance
            var dd = new YAHOO.util.DDProxy('demo', {
                //Don't resize the frame
                resizeFrame: false
            });
            //On startDrag let's change the proxy's size and color
            dd.on('startDragEvent', function() {
                Dom.setStyle(this.getDragEl(), 'height', '20px');
                Dom.setStyle(this.getDragEl(), 'width', '100px');
                Dom.setStyle(this.getDragEl(), 'backgroundColor', 'blue');
                Dom.setStyle(this.getDragEl(), 'color', 'white');
                this.getDragEl().innerHTML = 'Custom Proxy';
            });

Event.on('shim', 'click', function(e) {
                var tar = Event.getTarget(e);
                var value = tar.value;
                if (value == 'off' || value == 'Shim Off') {
                    //Turn on the shim
                    dd.useShim = true;
                    tar.value = 'on';
                    tar.innerHTML = 'Shim On';
                    Dom.get('debugShim').disabled = false;
                } else {
                    //Turn off the shim
                    dd.useShim = false;
                    tar.value = 'off';
                    tar.innerHTML = 'Shim Off';
                    Dom.get('debugShim').disabled = true;
                }
            });

Event.on('debugShim', 'click', function(e) {
                var tar = Event.getTarget(e);
                var value = tar.value;
                if (value == 'off' || value == 'Debug Off') {
                    //Turn on debugging the shim
                    YAHOO.util.DDM._debugShim = true;
                    tar.value = 'on';
                    tar.innerHTML = 'Debug On';
                } else {
                    //Turn off debugging the shim
                    YAHOO.util.DDM._debugShim = false;
                    tar.value = 'off';
                    tar.innerHTML = 'Debug Off';
                }
            
            });
        });
})();

YUI Logger Output:

Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.

Reload with logging
and debugging disabled.

Drag & Drop Examples:

More Drag & Drop Resources:

All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.