dragAndDropInsideScrolledDiv.html 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. <html>
  2. <head>
  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. </head>
  49. <body>
  50. <div style="overflow: scroll; margin: 20px; height: 90%; width: 90%">
  51. <div style="height: 4000px; width: 4000px;">
  52. <div id="test1" class="dragme" style="width: 100px; height: 100px;
  53. background-color: black;" />
  54. </div>
  55. </div>
  56. </body>
  57. </html>