写在前面
鼠标拖拽效果常见于用户自定义展示页面，比如qq空间，x宝店铺装修等，操作灵动，所见即所得；或者是一个简单modal移动效果，方便用户查看原网页的内容。正好周末抽时间可以实现下，动手做做笔记，方便日后翻阅。
简单拖动
星星之火可以燎原，我们先从最简单的需求最起。
主要分为三个步骤：
- 鼠标按下，获取鼠标点击时在div中的相对位置。
- 鼠标移动，元素的位置 = 就是鼠标的位置 - 刚才的差值。
- 鼠标放开，给鼠标移动和鼠标放开赋值null，除非再次点击，否则不会有任何移动效果。
映射成代码：
dragCircle.onmousedown = function(){
...//鼠标按下
dragCircle.onmousemove = function(){
...//鼠标移动
};
dragCircle.onmouseup = function(){
...//鼠标抬起
};
};
效果如下：
其实这里会存在一个问题，当你大力超距离拖往窗口外部的时候，咱们的元素仿佛飞到了外太空。。没了！所以，这里要加上一个范围限制。
拖拽范围限制
实现思路：
- 设置一个统一管理left,right,top,bottom范围的变量range
- 根据范围元素的位置，计算range各项值
- 当移动元素left和top超出range范围限制的时候，设置为range对应的阈值
源码和效果如下：
磁性吸入效果
在用户进行拖拽标签或者模块的时候，进行合理的摆放位置引导可以极大增强用户体验。
这里的代码思路相对简单，判断需要引导的位置，位置参数存入一个变量对象，然后计算拖拽元素的和引导位置的距离，小于某个阈值可以直接定位。
源码和效果如下：
列表拖拽排序
列表拖拽排序应该是项目中最常用的拖拽使用场景了，直观便捷是其一大亮点。
实现思路：
- 列表元素每个都绑定拖拽事件
- 鼠标按下的时候，创建一个空白节点，在原节点位置上占位
- 原节点绑定拖拽样式（absolute等）
- 文档绑定鼠标移动事件，根据当前拖拽到的位置计算其重新排序后的位置
- 讲空白节点插入到该位置
- 鼠标放开的时候，将被拖拽的元素插入到空白节点的位置
- 删除空白节点
- 移除事件绑定，清除相关
效果和源码如下：