YUI Library Examples: Drag & Drop: Drag and Drop

Basic Drag and Drop

The Drag & Drop Utility lets you make HTML elements draggable.

For this example, we will enable drag and drop for the three <div> elements.

Markup:


1	<div id="dd-demo-1" class="dd-demo"><br />DD</div>
2	<div id="dd-demo-2" class="dd-demo">DDTarget</div>
	view plain \| print \| ?

Code:


1	<script type="text/javascript">
2	(function() {
3
4	var dd, dd2, clickRadius = 46, startPos,
5	Event=YAHOO.util.Event, Dom=YAHOO.util.Dom;
6
7	YAHOO.util.Event.onDOMReady(function() {
8
9	var el = Dom.get("dd-demo-1");
10	startPos = Dom.getXY(el);
11
12	dd = new YAHOO.util.DD(el);
13
14	// our custom click validator let's us prevent clicks outside
15	// of the circle (but within the element) from initiating a
16	// drag.
17	dd.clickValidator = function(e) {
18
19	// get the screen rectangle for the element
20	var el = this.getEl();
21	var region = Dom.getRegion(el);
22
23	// get the radius of the largest circle that can fit inside
24	// var w = region.right - region.left;
25	// var h = region.bottom - region.top;
26	// var r = Math.round(Math.min(h, w) / 2);
27	//-or- just use a well-known radius
28	var r = clickRadius;
29
30	// get the location of the click
31	var x1 = Event.getPageX(e), y1 = Event.getPageY(e);
32
33	// get the center of the circle
34	var x2 = Math.round((region.right+region.left)/2);
35	var y2 = Math.round((region.top+region.bottom)/2);
36
37
38	// I don't want text selection even if the click does not
39	// initiate a drag
40	Event.preventDefault(e);
41
42	// check to see if the click is in the circle
43	return ( ((x1-x2)(x1-x2) + (y1-y2)(y1-y2)) <= r*r );
44	};
45
46	dd.onDragDrop = function(e, id) {
47	// center it in the square
48	Dom.setXY(this.getEl(), Dom.getXY(id));
49	}
50
51	dd.onInvalidDrop = function(e) {
52	// return to the start position
53	// Dom.setXY(this.getEl(), startPos);
54
55	// Animating the move is more intesting
56	new YAHOO.util.Motion(
57	this.id, {
58	points: {
59	to: startPos
60	}
61	},
62	0.3,
63	YAHOO.util.Easing.easeOut
64	).animate();
65
66	}
67
68	dd2 = new YAHOO.util.DDTarget("dd-demo-2");
69
70	});
71
72	})();
73	</script>
	view plain \| print \| ?

var dd, dd2, clickRadius = 46, startPos,
            Event=YAHOO.util.Event, Dom=YAHOO.util.Dom;

YAHOO.util.Event.onDOMReady(function() {

var el = Dom.get("dd-demo-1");
            startPos = Dom.getXY(el);

dd = new YAHOO.util.DD(el);

// our custom click validator let's us prevent clicks outside
            // of the circle (but within the element) from initiating a
            // drag.
            dd.clickValidator = function(e) {

// get the screen rectangle for the element
                var el = this.getEl();
                var region = Dom.getRegion(el);

// get the radius of the largest circle that can fit inside
                // var w = region.right - region.left;
                // var h = region.bottom - region.top;
                // var r = Math.round(Math.min(h, w) / 2);
                //-or- just use a well-known radius
                var r = clickRadius;

// get the location of the click
                var x1 = Event.getPageX(e), y1 = Event.getPageY(e);

// get the center of the circle
                var x2 = Math.round((region.right+region.left)/2);
                var y2 = Math.round((region.top+region.bottom)/2);

// I don't want text selection even if the click does not
                // initiate a drag
                Event.preventDefault(e);

// check to see if the click is in the circle
                return ( ((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2)) <= r*r );
            };

dd.onDragDrop = function(e, id) {
                // center it in the square
                Dom.setXY(this.getEl(), Dom.getXY(id));
            }

dd.onInvalidDrop = function(e) {
                // return to the start position
                // Dom.setXY(this.getEl(), startPos);

// Animating the move is more intesting
                new YAHOO.util.Motion( 
                    this.id, { 
                        points: { 
                            to: startPos
                        }
                    }, 
                    0.3, 
                    YAHOO.util.Easing.easeOut 
                ).animate();

}

dd2 = new YAHOO.util.DDTarget("dd-demo-2");

});

})();
</script>

YUI Library Examples: Drag & Drop: Drag and Drop - Custom Click Validator

Basic Drag and Drop

YUI Logger Output:

Logger Console

Drag & Drop Examples:

More Drag & Drop Resources: