1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
5 <style type="text/css">
11 background-color: #FF0000;
23 <script type="text/javascript">
25 var _startX = 0; // mouse starting positions
27 var _offsetX = 0; // current element offset
30 var _oldZIndex = 0; // we temporarily increase the z-index during drag
34 function InitDragDrop() {
35 document.onclick = OnMouseClick;
36 document.onMouseClick = OnMouseClick;
40 function OnMouseClick(e) {
43 // if first click this is zero
44 if (_countClick == 0) {
49 // IE uses srcElement, others use target
50 var target = e.target != null ? e.target : e.srcElement;
52 _debug.innerHTML = target.className == 'drag'
53 ? 'draggable element clicked'
54 : 'NON-draggable element clicked';
56 // for IE, left click == 1
57 // for Firefox, left click == 0
58 if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag') {
59 // grab the mouse position
63 // grab the clicked element's position
64 _offsetX = ExtractNumber(target.style.left);
65 _offsetY = ExtractNumber(target.style.top);
67 // bring the clicked element to the front while it is being dragged
68 _oldZIndex = target.style.zIndex;
69 target.style.zIndex = 10000;
71 // set _dragElement for next click
72 _dragElement = target;
74 // tell our code to start moving the element with the mouse
75 document.onmousemove = OnMouseMove;
77 // cancel out any text selections
78 document.body.focus();
80 // prevent text selection in IE
81 document.onselectstart = function() { return false; };
82 // prevent IE from trying to drag an image
83 target.ondragstart = function() { return false; };
85 //set click count to 1 so we know next click is to release
87 // prevent text selection (except IE)
93 if (_countClick == 1) {
95 var hitelements = getElementsByClassName("dropon");
97 for (var i = 0; i < hitelements.length; i++) {
98 if (_dragElement != null) {
99 var hittest = hitTest(_dragElement, hitelements[i]);
101 if (hittest) //we have a div we want (dropon)
105 if (_dragElement != null) {
106 _dragElement.style.zIndex = _oldZIndex;
108 // we're done with these events until the next OnMouseDown
109 document.onmousemove = null;
110 document.onselectstart = null;
111 _dragElement.ondragstart = null;
113 // this is how we know we're not dragging
116 _debug.innerHTML = 'mouse up';
119 //set click count back to 0 so next we know it's first click again
132 function OnMouseMove(e) {
134 var e = window.event;
136 // this is the actual "drag code"
137 _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px';
138 _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
140 _debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
143 function ExtractNumber(value) {
144 var n = parseInt(value);
146 return n == null || isNaN(n) ? 0 : n;
149 // this is simply a shortcut for the eyes and fingers
151 return document.getElementById(id);
154 function OnMouseUp(e) {
158 hitTest = function(o, l) {
159 function getOffset(o) {
160 for (var r = { l: o.offsetLeft, t: o.offsetTop, r: o.offsetWidth, b: o.offsetHeight };
161 o = o.offsetParent; r.l += o.offsetLeft, r.t += o.offsetTop);
162 return r.r += r.l, r.b += r.t, r;
164 var a = arguments, j = a.length;
165 j > 2 && (o = { offsetLeft: o, offsetTop: l, offsetWidth: j == 5 ? a[2] : 0,
166 offsetHeight: j == 5 ? a[3] : 0, offsetParent: null
168 for (var b, s, r = [], a = getOffset(o), j = isNaN(l.length), i = (j ? l = [l] : l).length; i;
169 b = getOffset(l[--i]), (a.l == b.l || (a.l > b.l ? a.l <= b.r : b.l <= a.r))
170 && (a.t == b.t || (a.t > b.t ? a.t <= b.b : b.t <= a.b)) && (r[r.length] = l[i]));
171 return j ? !!r.length : r;
174 function getElementsByClassName(classname, node) {
175 if (!node) node = document.getElementsByTagName("body")[0];
177 var re = new RegExp('\\b' + classname + '\\b');
178 var els = node.getElementsByTagName("*");
179 for (var i = 0, j = els.length; i < j; i++)
180 if (re.test(els[i].className)) a.push(els[i]);
188 <div runat="server" id="thediv" class="drag">
192 <div id="slot1" class="dropon" style='position: absolute; height: 28px; width: 28px;
193 top: 200px; left: 200px; background-color: #FF0000; color: White;'>
195 <div id="slot2" class="dropon" style='position: absolute; height: 28px; width: 28px;
196 top: 200px; left: 230px; background-color: #FF0000; color: White;'>
198 <pre id="debug"> </pre>
199 <canvas width="200" height="200" style="border:1px solid black;" id="thecanvas"></canvas>