实现可拖拽插件

• 一、js拖拽插件的原理
  常见的拖拽操作是什么样的呢？整过过程大概有下面几个步骤：

1、用鼠标点击被拖拽的元素

2、按住鼠标不放，移动鼠标

3、拖拽元素到一定位置，放开鼠标

这里的过程涉及到三个dom事件：onmousedown,onmousemove,onmouseup。所以拖拽的基本思路就是：

1、用鼠标点击被拖拽的元素触发onmousedown

（1）设置当前元素的可拖拽为true，表示可以拖拽

（2）记录当前鼠标的坐标x,y

（3）记录当前元素的坐标x,y

2、移动鼠标触发onmousemove

（1）判断元素是否可拖拽，如果是则进入步骤2，否则直接返回

（2）如果元素可拖拽，则设置元素的坐标

元素的x坐标 = 鼠标移动的横向距离+元素本来的x坐标 = 鼠标现在的x坐标 - 鼠标之前的x坐标 + 元素本来的x坐标

元素的y坐标 = 鼠标移动的横向距离+元素本来的y坐标 = 鼠标现在的y坐标 - 鼠标之前的y坐标 + 元素本来的y坐标

3、放开鼠标触发onmouseup

（1）将鼠标的可拖拽状态设置成false

• 二、根据原理实现的最基本效果
  在实现基本的效果之前，有几点需要说明的：

1、元素想要被拖动，它的postion属性一定要是relative或absolute

2、通过event.clientX和event.clientY获取鼠标的坐标

3、onmousemove是绑定在document元素上而不是拖拽元素本身，这样能解决快速拖动造成的延迟或停止移动的问题