Drag.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. var Drag={
  2. "obj":null,
  3. "init":function(handle, dragBody, e){
  4. if (e == null) {
  5. handle.onmousedown=Drag.start;
  6. }
  7. handle.root = dragBody;
  8. if(isNaN(parseInt(handle.root.style.left)))handle.root.style.left="0px";
  9. if(isNaN(parseInt(handle.root.style.top)))handle.root.style.top="0px";//确保后来能够取得top值
  10. handle.root.onDragStart=new Function();
  11. handle.root.onDragEnd=new Function();
  12. handle.root.onDrag=new Function();
  13. if (e !=null) {
  14. var handle=Drag.obj=handle;
  15. e=Drag.fixe(e);
  16. var top=parseInt(handle.root.style.top);
  17. var left=parseInt(handle.root.style.left);
  18. handle.root.onDragStart(left,top,e.pageX,e.pageY);
  19. handle.lastMouseX=e.pageX;
  20. handle.lastMouseY=e.pageY;
  21. document.onmousemove=Drag.drag;
  22. document.onmouseup=Drag.end;
  23. }
  24. },
  25. "start":function(e){
  26. var handle=Drag.obj=this;
  27. e=Drag.fixEvent(e);
  28. e.stopPropagation()
  29. var top=parseInt(handle.root.style.top);
  30. var left=parseInt(handle.root.style.left);
  31. //alert(left)
  32. //一般情况下 left top 在初始的时候都为0
  33. handle.root.onDragStart(left,top,e.pageX,e.pageY);
  34. handle.lastMouseX=e.pageX;
  35. handle.lastMouseY=e.pageY;
  36. document.onmousemove=Drag.drag;
  37. document.onmouseup=Drag.end;
  38. return false;
  39. },
  40. "drag":function(e){//这里的this为document 所以拖动对象只能保存在Drag.obj里
  41. e=Drag.fixEvent(e);
  42. e.stopPropagation()
  43. var handle=Drag.obj;
  44. var mouseY=e.pageY;
  45. var mouseX=e.pageX;
  46. var top=parseInt(handle.root.style.top);
  47. var left=parseInt(handle.root.style.left);//这里的top和left是handle.root距离浏览器边框的上边距和左边距
  48. var currentLeft,currentTop;
  49. currentLeft=left+mouseX-handle.lastMouseX;
  50. currentTop=top+(mouseY-handle.lastMouseY);
  51. //上一瞬间的上边距加上鼠标在两个瞬间移动的距离 得到现在的上边距
  52. handle.root.style.left=currentLeft +"px";
  53. handle.root.style.top=currentTop+"px";
  54. //更新当前的位置
  55. handle.lastMouseX=mouseX;
  56. handle.lastMouseY=mouseY;
  57. //保存这一瞬间的鼠标值 用于下一次计算位移
  58. handle.root.onDrag(currentLeft,currentTop,e.pageX,e.pageY);//调用外面对应的函数
  59. return false;
  60. },
  61. "end":function(){
  62. document.onmousemove=null;
  63. document.onmouseup=null;
  64. Drag.obj.root.onDragEnd(parseInt(Drag.obj.root.style.left),parseInt(Drag.obj.root.style.top));
  65. Drag.obj=null;
  66. },
  67. "fixEvent":function(e){//格式化事件参数对象
  68. if(typeof e=="undefined")e=window.event;
  69. if(typeof e.layerX=="undefined")e.layerX=e.offsetX;
  70. if(typeof e.layerY=="undefined")e.layerY=e.offsetY;
  71. if(typeof e.pageX == "undefined")e.pageX = e.clientX + document.body.scrollLeft - document.body.clientLeft;
  72. if(typeof e.pageY == "undefined")e.pageY = e.clientY + document.body.scrollTop - document.body.clientTop;
  73. return e;
  74. }
  75. };