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

   1 <html>
   2 <head>
   3     <style type="text/css">
   4         .drag
   5         {
   6             position: absolute;
   7             color: White;
   8             z-index: 1;
   9         }
  10         .slot
  11         {
  12             position: absolute;
  13             height: 32px;
  14             width: 32px;
  15             color: White;
  16             z-index: 0;
  17         }
  18     </style>
  19
  20     <script type="text/javascript">
  21
  22         var _offsetX = 0;
  23         var _offsetY = 0;
  24         var _dragElement;
  25         var _oldZIndex = 0;
  26         var _countClick = 0;
  27         window.onload = InitDragDrop;
  28         function InitDragDrop() {
  29             document.onclick = OnMouseClick;
  30             document.getElementById('inv_slot1').onclick = OnMouseClick; document.getElementById('inv_slot2').onclick = OnMouseClick; document.getElementById('inv_slot3').onclick = OnMouseClick; document.getElementById('inv_slot4').onclick = OnMouseClick; document.getElementById('inv_slot5').onclick = OnMouseClick; document.getElementById('inv_slot6').onclick = OnMouseClick; document.getElementById('inv_slot7').onclick = Drop; document.getElementById('inv_slot8').onclick = Drop; document.getElementById('inv_slot9').onclick = Drop; document.getElementById('slot1').onclick = OnMouseClick; document.getElementById('slot2').onclick = OnMouseClick; document.getElementById('slot3').onclick = OnMouseClick; document.getElementById('slot4').onclick = OnMouseClick; document.getElementById('slot5').onclick = OnMouseClick; document.getElementById('slot6').onclick = OnMouseClick; document.getElementById('slot7').onclick = OnMouseClick; document.getElementById('slot8').onclick = OnMouseClick; document.getElementById('slot9').onclick = OnMouseClick; document.getElementById('slot10').onclick = OnMouseClick; document.getElementById('slot11').onclick = OnMouseClick; document.getElementById('slot12').onclick = OnMouseClick; document.getElementById('slot13').onclick = OnMouseClick; document.getElementById('slot14').onclick = OnMouseClick; document.getElementById('slot15').onclick = OnMouseClick; document.getElementById('slot16').onclick = OnMouseClick; document.getElementById('slot17').onclick = OnMouseClick; document.getElementById('slot18').onclick = OnMouseClick; document.getElementById('slot19').onclick = OnMouseClick; document.getElementById('slot20').onclick = OnMouseClick; document.getElementById('slot21').onclick = OnMouseClick; document.getElementById('slot22').onclick = OnMouseClick; document.getElementById('slot23').onclick = OnMouseClick; document.getElementById('slot24').onclick = OnMouseClick; document.getElementById('slot25').onclick = OnMouseClick; document.getElementById('slot26').onclick = OnMouseClick; document.getElementById('slot27').onclick = OnMouseClick; document.getElementById('slot28').onclick = OnMouseClick; document.getElementById('slot29').onclick = OnMouseClick; document.getElementById('slot30').onclick = OnMouseClick; document.getElementById('slot31').onclick = OnMouseClick; document.getElementById('slot32').onclick = OnMouseClick; document.getElementById('slot3').onclick = Drop; document.getElementById('slot4').onclick = Drop; document.getElementById('slot5').onclick = Drop; document.getElementById('slot6').onclick = Drop; document.getElementById('slot7').onclick = Drop; document.getElementById('slot11').onclick = Drop; document.getElementById('slot12').onclick = Drop; document.getElementById('slot13').onclick = Drop; document.getElementById('slot14').onclick = Drop; document.getElementById('slot15').onclick = Drop; document.getElementById('slot17').onclick = Drop; document.getElementById('slot18').onclick = Drop; document.getElementById('slot19').onclick = Drop; document.getElementById('slot20').onclick = Drop; document.getElementById('slot21').onclick = Drop; document.getElementById('slot22').onclick = Drop; document.getElementById('slot23').onclick = Drop; document.getElementById('slot24').onclick = Drop; document.getElementById('slot25').onclick = Drop; document.getElementById('slot26').onclick = Drop; document.getElementById('slot27').onclick = Drop; document.getElementById('slot28').onclick = Drop; document.getElementById('slot29').onclick = Drop; document.getElementById('slot30').onclick = Drop; document.getElementById('slot31').onclick = Drop; document.getElementById('slot32').onclick = Drop;
  31
  32
  33         }
  34
  35         function OnMouseClick(e) {
  36             if (_countClick == 0) {
  37                 if (e == null)
  38                     e = window.event;
  39                 var target = e.target != null ? e.target : e.srcElement;
  40                 if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag') {
  41                     _offsetX = ExtractNumber(target.style.left);
  42                     _offsetY = ExtractNumber(target.style.top);
  43                     _oldZIndex = target.style.zIndex;
  44                     target.style.zIndex = 10000;
  45                     _dragElement = target;
  46
  47                     document.onmousemove = OnMouseMove;
  48                     document.body.focus();
  49                     document.onselectstart = function() { return false; };
  50                     target.ondragstart = function() { return false; };
  51                     if (!e) var e = window.event;
  52                     e.cancelBubble = true;
  53                     if (e.stopPropagation) e.stopPropagation();
  54                     _dragElement.parentElement.onclick = Drop;
  55                     _countClick = 1;
  56                 }
  57             }
  58         }
  59         function Drop(e) {
  60             if (_countClick == 1) {
  61                 if (e == null)
  62                     e = window.event;
  63                 var item = _dragElement.id;
  64
  65
  66                 var target = e.target != null ? e.target : e.srcElement;
  67                 var slot = target.id;
  68
  69                 _offsetX = ExtractNumber(target.style.left);
  70                 _offsetY = ExtractNumber(target.style.top);
  71
  72                 if (_dragElement != null) {
  73                     _dragElement.style.zIndex = _oldZIndex;
  74                     document.onmousemove = null;
  75                     document.onselectstart = null;
  76                     _dragElement.style.left = _offsetX;
  77                     _dragElement.style.top = _offsetY;
  78                     _dragElement.ondragstart = null;
  79                     _dragElement.parentElement.onclick = null;
  80                     _dragElement = null;
  81                 }
  82                 _countClick = 0;
  83             }
  84
  85             window.location = "include/inv_p.php?char=1&from=" + item + "&to=" + slot;
  86         }
  87
  88
  89
  90         function OnMouseMove(e) {
  91             if (e == null)
  92                 var e = window.event;
  93
  94             // this is the actual "drag code"
  95             _dragElement.style.left = (e.clientX) + 1;
  96             _dragElement.style.top = (e.clientY) + 1;
  97         }
  98
  99         function ExtractNumber(value) {
 100             var n = parseInt(value);
 101             return n == null || isNaN(n) ? 0 : n;
 102         }
 103
 104         function $(id) {
 105             return document.getElementById(id);
 106         }
 107
 108         function OnMouseUp(e) { }
 109
 110
 111
 112
 113     </script>
 114
 115 </head>
 116 <body topmargin="0" leftmargin="0">
 117     <div style='position: relative; height: 400px; width: 256px; top: 0px; left: 0px;
 118         background-color: #000000; color: White; z-index: 0; background: url(http://street-kings-online.com/files/bg.jpg) no-repeat left top;'>
 119     </div><div id='inv_slot1_parent'>
 120     <div id='inv_slot1' class='drag' style='width: 32px; height: 64px; top: 84px; left: 16px;
 121         background: url(http://street-kings-online.com/sprites/items/c01_sword01.gif) no-repeat center top;'>
 122     </div></div>
 123     <div id='inv_slot2' class='drag' style='width: 64px; height: 64px; top: 84px; left: 176px;
 124         background: url(http://street-kings-online.com/sprites/items/2_3.gif) no-repeat center top;'>
 125     </div>
 126     <div id='inv_slot3' class='drag' style='width: 64px; height: 64px; top: 10px; left: 96px;
 127         background: url(http://street-kings-online.com/sprites/items/4_9.gif) no-repeat center top;'>
 128     </div>
 129     <div id='inv_slot4' class='drag' style='width: 64px; height: 64px; top: 190px; left: 16px;
 130         background: url(http://street-kings-online.com/sprites/items/5_2.gif) no-repeat center top;'>
 131     </div>
 132     <div id='inv_slot5' class='drag' style='width: 64px; height: 96px; top: 84px; left: 96px;
 133         background: url(http://street-kings-online.com/sprites/items/3_11.gif) no-repeat center top;'>
 134     </div>
 135     <div id='inv_slot6' class='drag' style='width: 64px; height: 64px; top: 190px; left: 96px;
 136         background: url(http://street-kings-online.com/sprites/items/8_9.gif) no-repeat center top;'>
 137     </div>
 138     <div id='inv_slot7' class='slot' style='top: 42px; left: 48px; width: 32px; height: 32px;'>
 139     </div>
 140     <div id='inv_slot8' class='slot' style='top: 190px; left: 176px; width: 32px; height: 32px;'>
 141     </div>
 142     <div id='inv_slot9' class='slot' style='top: 190px; left: 208px; width: 32px; height: 32px;'>
 143     </div>
 144     <div id='slot1' class='drag' style='width: 32px; height: 64px; top: 272px; left: 0px;
 145         background: url(http://street-kings-online.com/sprites/items/c01_sword01.gif) no-repeat center top;'>
 146     </div>
 147     <div id='slot2' class='drag' style='width: 32px; height: 64px; top: 272px; left: 32px;
 148         background: url(http://street-kings-online.com/sprites/items/c01_sword01.gif) no-repeat center top;'>
 149     </div>
 150     <div id='slot8' class='drag' style='width: 32px; height: 64px; top: 272px; left: 224px;
 151         background: url(http://street-kings-online.com/sprites/items/c01_sword01.gif) no-repeat center top;'>
 152     </div>
 153     <div id='slot1' class='slot' style='top: 272px; left: 0px;'>
 154     </div>
 155     <div id='slot2' class='slot' style='top: 272px; left: 32px;'>
 156     </div>
 157     <div id='slot3' class='slot' style='top: 272px; left: 64px;'>
 158     </div>
 159     <div id='slot4' class='slot' style='top: 272px; left: 96px;'>
 160     </div>
 161     <div id='slot5' class='slot' style='top: 272px; left: 128px;'>
 162     </div>
 163     <div id='slot6' class='slot' style='top: 272px; left: 160px;'>
 164     </div>
 165     <div id='slot7' class='slot' style='top: 272px; left: 192px;'>
 166     </div>
 167     <div id='slot8' class='slot' style='top: 272px; left: 224px;'>
 168     </div>
 169     <div id='slot9' class='slot' style='top: 304px; left: 0px;'>
 170     </div>
 171     <div id='slot10' class='slot' style='top: 304px; left: 32px;'>
 172     </div>
 173     <div id='slot11' class='slot' style='top: 304px; left: 64px;'>
 174     </div>
 175     <div id='slot12' class='slot' style='top: 304px; left: 96px;'>
 176     </div>
 177     <div id='slot13' class='slot' style='top: 304px; left: 128px;'>
 178     </div>
 179     <div id='slot14' class='slot' style='top: 304px; left: 160px;'>
 180     </div>
 181     <div id='slot15' class='slot' style='top: 304px; left: 192px;'>
 182     </div>
 183     <div id='slot16' class='slot' style='top: 304px; left: 224px;'>
 184     </div>
 185     <div id='slot17' class='slot' style='top: 336px; left: 0px;'>
 186     </div>
 187     <div id='slot18' class='slot' style='top: 336px; left: 32px;'>
 188     </div>
 189     <div id='slot19' class='slot' style='top: 336px; left: 64px;'>
 190     </div>
 191     <div id='slot20' class='slot' style='top: 336px; left: 96px;'>
 192     </div>
 193     <div id='slot21' class='slot' style='top: 336px; left: 128px;'>
 194     </div>
 195     <div id='slot22' class='slot' style='top: 336px; left: 160px;'>
 196     </div>
 197     <div id='slot23' class='slot' style='top: 336px; left: 192px;'>
 198     </div>
 199     <div id='slot24' class='slot' style='top: 336px; left: 224px;'>
 200     </div>
 201     <div id='slot25' class='slot' style='top: 368px; left: 0px;'>
 202     </div>
 203     <div id='slot26' class='slot' style='top: 368px; left: 32px;'>
 204     </div>
 205     <div id='slot27' class='slot' style='top: 368px; left: 64px;'>
 206     </div>
 207     <div id='slot28' class='slot' style='top: 368px; left: 96px;'>
 208     </div>
 209     <div id='slot29' class='slot' style='top: 368px; left: 128px;'>
 210     </div>
 211     <div id='slot30' class='slot' style='top: 368px; left: 160px;'>
 212     </div>
 213     <div id='slot31' class='slot' style='top: 368px; left: 192px;'>
 214     </div>
 215     <div id='slot32' class='slot' style='top: 368px; left: 224px;'>
 216     </div>
 217 </body>
 218 </html>