1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Custom Click Validator</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/animation/animation-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
.dd-demo {
position:relative;
border:4px solid #666;
text-align:center;
color:#fff;
cursor:move;
height:100px;
width:100px;
}
#dd-demo-1 {
background:url(../dragdrop/assets/circle.gif) 0 0 no-repeat;
border:0px solid black;
z-index:10;
cursor:default;
}
#dd-demo-2 {
background:#A0B9A6;
top:10px; left:180px;
border:0px solid black;
cursor:default;
}
</style>
<!--end custom header content for this example-->
</head>
<body class="yui-skin-sam">
<h1>Custom Click Validator</h1>
<div class="exampleIntro">
<p>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).</p>
<p>The same method could be used to create any non-rectangular draggable object.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<div id="dd-demo-1" class="dd-demo"><br />DD</div>
<div id="dd-demo-2" class="dd-demo">DDTarget</div>
<script type="text/javascript">
(function() {
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>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
|
