YUI Library Examples: Drag & Drop: Custom Click Validator

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>

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: Custom Click Validator

Basic Drag and Drop

Configuration for This Example

YUI Logger Output:

Logger Console

Drag & Drop Examples:

More Drag & Drop Resources: