git.roojs.org Git - roojs1/blob - examples/testing.html

   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">
   3     <head runat="server">
   4         <title></title>
   5         <style type="text/css">
   6             .drag
   7             {
   8                 position: relative;
   9                 height: 50px;
  10                 width: 50px;
  11                 background-color: #FF0000;
  12                 color: White;
  13             }
  14
  15             .dropon
  16             {
  17                 position: relative;
  18
  19
  20             }
  21         </style>
  22
  23         <script type="text/javascript">
  24
  25             var _startX = 0;            // mouse starting positions
  26             var _startY = 0;
  27             var _offsetX = 0;           // current element offset
  28             var _offsetY = 0;
  29             var _dragElement;
  30             var _oldZIndex = 0;         // we temporarily increase the z-index during drag
  31             var _debug;
  32             var _countClick = 0;
  33             InitDragDrop();
  34             function InitDragDrop() {
  35                 document.onclick = OnMouseClick;
  36                 document.onMouseClick = OnMouseClick;
  37
  38             }
  39
  40             function OnMouseClick(e) {
  41
  42                 _debug = $('debug');
  43                 // if first click this is zero
  44                 if (_countClick == 0) {
  45                     // IE
  46                     if (e == null)
  47                         e = window.event;
  48
  49                     // IE uses srcElement, others use target
  50                     var target = e.target != null ? e.target : e.srcElement;
  51
  52                     _debug.innerHTML = target.className == 'drag'
  53                         ? 'draggable element clicked'
  54                     : 'NON-draggable element clicked';
  55
  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
  60                         _startX = e.clientX;
  61                         _startY = e.clientY;
  62
  63                         // grab the clicked element's position
  64                         _offsetX = ExtractNumber(target.style.left);
  65                         _offsetY = ExtractNumber(target.style.top);
  66
  67                         // bring the clicked element to the front while it is being dragged
  68                         _oldZIndex = target.style.zIndex;
  69                         target.style.zIndex = 10000;
  70
  71                         // set _dragElement for next click
  72                         _dragElement = target;
  73
  74                         // tell our code to start moving the element with the mouse
  75                         document.onmousemove = OnMouseMove;
  76
  77                         // cancel out any text selections
  78                         document.body.focus();
  79
  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; };
  84
  85                         //set click count to 1 so we know next click is to release
  86                         _countClick = 1;
  87                         // prevent text selection (except IE)
  88                         return false;
  89                     }
  90
  91                 }
  92
  93                 if (_countClick == 1) {
  94
  95                     var hitelements = getElementsByClassName("dropon");
  96
  97                     for (var i = 0; i < hitelements.length; i++) {
  98                         if (_dragElement != null) {
  99                             var hittest = hitTest(_dragElement, hitelements[i]);
 100
 101                             if (hittest) //we have a div we want (dropon)
 102                             {
 103
 104
 105                                 if (_dragElement != null) {
 106                                     _dragElement.style.zIndex = _oldZIndex;
 107
 108                                     // we're done with these events until the next OnMouseDown
 109                                     document.onmousemove = null;
 110                                     document.onselectstart = null;
 111                                     _dragElement.ondragstart = null;
 112
 113                                     // this is how we know we're not dragging
 114                                     _dragElement = null;
 115
 116                                     _debug.innerHTML = 'mouse up';
 117                                 }
 118
 119                                 //set click count back to 0 so next we know it's first click again
 120                                 _countClick = 0;
 121                             }
 122                         }
 123
 124                     }
 125
 126
 127
 128                 }
 129
 130             }
 131
 132             function OnMouseMove(e) {
 133                 if (e == null)
 134                     var e = window.event;
 135
 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';
 139
 140                 _debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
 141             }
 142
 143             function ExtractNumber(value) {
 144                 var n = parseInt(value);
 145
 146                 return n == null || isNaN(n) ? 0 : n;
 147             }
 148
 149             // this is simply a shortcut for the eyes and fingers
 150             function $(id) {
 151                 return document.getElementById(id);
 152             }
 153
 154             function OnMouseUp(e) {
 155
 156             }
 157
 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;
 163                 }
 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
 167                 }, l = a[j - 1]);
 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;
 172             };
 173
 174             function getElementsByClassName(classname, node) {
 175                 if (!node) node = document.getElementsByTagName("body")[0];
 176                 var a = [];
 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]);
 181                 return a;
 182             }
 183         </script>
 184
 185     </head>
 186     <body>
 187
 188             <div runat="server" id="thediv" class="drag">
 189                 Drag this
 190             </div>
 191
 192             <div id="slot1" class="dropon" style='position: absolute; height: 28px; width: 28px;
 193                  top: 200px; left: 200px; background-color: #FF0000; color: White;'>
 194             </div>
 195             <div id="slot2" class="dropon" style='position: absolute; height: 28px; width: 28px;
 196                  top: 200px; left: 230px; background-color: #FF0000; color: White;'>
 197             </div>
 198             <pre id="debug"> </pre>
 199             <canvas width="200" height="200" style="border:1px solid black;" id="thecanvas"></canvas>
 200     </body>
 201 </html>