简易而又灵活的Javascript拖拽框架（一）

核心提示： 使用方法Drag.init(handle,dragBody);这样可以让鼠标拖动元素，Handle为拖动的把手，简易而又灵活的Javascript拖拽框架（一）(2)，dragBody是在拖动时需要移动的元素，如果需要更高级的控制拖动或者拖放的话，Document的mouseup方法，调用

使用方法

Drag.init(handle,dragBody);这样可以让鼠标拖动元素。Handle为拖动的把手，dragBody是在拖动时需要移动的元素。

如果需要更高级的控制拖动或者拖放的话，可以给dragBody设置三个方法

dragBody.onDragStart=function(left,top,mouseX,mouseY){}
　　
onDrag（left,top,mouseX,mouseY）{}
　　
onDragEnd（left,top,mouseX,mouseY）{}

这四个参数分别是：拖动对象的left属性、拖动对象的top属性（此时拖动对象的position为absolute）、鼠标当前的x、鼠标当前的y。在每个过程中都可以通过四个参数来更精确的控制拖动的每个过程，更主要的是我们不需要去管被鼠标拖动的元素是怎么移动的，这些都在框架中已经做好了，这让拖拽看起来更整洁。框架具体是怎么运转的，其实很简单

三、原理

Drag有几个成员

Drag.obj用来存放鼠标正在被拖动的元素，只有在鼠标按下过后才会赋值，鼠标松开便为空了。便于在这几个方法之间都能够轻易的找到正在被拖动的元素。

Drag.init主要是用来订阅handle的onmousedown事件，所以handle一旦点击，则会执行Drag.start方法。

Drag.start是用来注册document的mousemove和mouseup事件的，而且会调用我们定义的dragBody.onDragStart方法（这里的dragBody就是通过Drag.obj来获得的），以便处理框架以外需要处理的事情。

Mousemove的时候会不断的触发Drag.drag方法，这个方法主要是控制dragBody的移动（通过前后两个瞬间的位移差来调整dragBody的位置），以及调用外部的dragBody.onDrag方法，处理框架以外的事情。

Document的mouseup方法，调用外部的onDragEnd方法，释放document绑定的两个事件，以及将临时的obj置为空