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';
                }
            
            });
        });
})();

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.

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

Using The Drag Shim

Configuration for This Example

YUI Logger Output:

Logger Console

Drag & Drop Examples:

More Drag & Drop Resources: