This example demonstrates how to implement a custom click validator to make a circular drag and drop implementation. Because all DOM elements that have dimensions are rectangular, the way to implement a circular drag object is to perform calculations on mousedown to determine whether the mouse was targeting a valid portion of the element (eg, a portion within the circle).
The same method could be used to create any non-rectangular draggable object.
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 | ? |
INFO114ms (+47) 4:38:30 AM:global
id is not a string, assuming it is an HTMLElement
INFO67ms (+67) 4:38:30 AM:DragDropMgr
DragDropMgr onload
INFO0ms (+0) 4:38:30 AM:global
Logger initialized
Note: You are viewing this example in debug mode with logging enabled. This can significantly slow performance.
Copyright © 2008 Yahoo! Inc. All rights reserved.
Privacy Policy - Terms of Service - Copyright Policy - Job Openings