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>