dragAndDropTest.html 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <html>
  2. <body>
  3. <style>
  4. <!--
  5. .dragme{position:relative;}
  6. -->
  7. </style>
  8. <script language="JavaScript1.2">
  9. <!--
  10. var ie=document.all;
  11. var nn6=document.getElementById&&!document.all;
  12. var isdrag=false;
  13. var x,y;
  14. var dobj;
  15. function movemouse(e)
  16. {
  17. if (isdrag)
  18. {
  19. if (e && e.clientX)
  20. {
  21. dobj.style.left = tx + e.clientX - x;
  22. dobj.style.top = ty + e.clientY - y
  23. }
  24. else
  25. {
  26. dobj.style.left = tx + event.clientX - x;
  27. dobj.style.top = ty + event.clientY - y;
  28. }
  29. return false;
  30. }
  31. }
  32. function selectmouse(e)
  33. {
  34. var fobj;
  35. var topelement;
  36. if (e && e.target)
  37. {
  38. fobj = e.target;
  39. topelement = "HTML";
  40. }
  41. else
  42. {
  43. fobj = event.srcElement;
  44. topelement = "BODY";
  45. }
  46. while (fobj.tagName != topelement && fobj.className != "dragme")
  47. {
  48. if (fobj.parentNode)
  49. {
  50. fobj = fobj.parentNode;
  51. }
  52. else
  53. {
  54. fobj = fobj.parentElement;
  55. }
  56. }
  57. if (fobj.className=="dragme")
  58. {
  59. isdrag = true;
  60. dobj = fobj;
  61. tx = parseInt(dobj.style.left+0);
  62. ty = parseInt(dobj.style.top+0);
  63. if (e && e.clientX)
  64. {
  65. x = e.clientX;
  66. y = e.clientY;
  67. }
  68. else
  69. {
  70. x = event.clientX;
  71. y = event.clientY;
  72. }
  73. document.onmousemove=movemouse;
  74. return false;
  75. }
  76. }
  77. document.onmousedown=selectmouse;
  78. document.onmouseup=new Function("isdrag=false");
  79. //-->
  80. </script>
  81. <img src="icon.gif" class="dragme" id="test1"><br>
  82. <img src="icon.gif" class="dragme" id="test2"><br>
  83. <b>"Hi there</b>
  84. <div style="position: absolute; left: 210px; top: 80px; height: 400px; width: 100px; padding: 10em;">
  85. <img src="icon.gif" class="dragme" id="test3"><br>
  86. <img src="icon.gif" class="dragme" id="test4"><br>
  87. </div>
  88. </body>
  89. </html>