dragAndDropTest.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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. dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
  20. dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
  21. return false;
  22. }
  23. }
  24. function selectmouse(e)
  25. {
  26. var fobj = nn6 ? e.target : event.srcElement;
  27. var topelement = nn6 ? "HTML" : "BODY";
  28. while (fobj.tagName != topelement && fobj.className != "dragme")
  29. {
  30. fobj = nn6 ? fobj.parentNode : fobj.parentElement;
  31. }
  32. if (fobj.className=="dragme")
  33. {
  34. isdrag = true;
  35. dobj = fobj;
  36. tx = parseInt(dobj.style.left+0);
  37. ty = parseInt(dobj.style.top+0);
  38. x = nn6 ? e.clientX : event.clientX;
  39. y = nn6 ? e.clientY : event.clientY;
  40. document.onmousemove=movemouse;
  41. return false;
  42. }
  43. }
  44. document.onmousedown=selectmouse;
  45. document.onmouseup=new Function("isdrag=false");
  46. //-->
  47. </script>
  48. <img src="icon.gif" class="dragme" id="test1"><br>
  49. <img src="icon.gif" class="dragme" id="test2"><br>
  50. <b>"Hi there</b>
  51. <div style="position: absolute; left: 210px; top: 80px; height: 400px; width: 100px; padding: 10em;">
  52. <img src="icon.gif" class="dragme" id="test3"><br>
  53. <img src="icon.gif" class="dragme" id="test4"><br>
  54. </div>
  55. </body>
  56. </html>