探索神秘的js拖拽事件

最近学习js的过程中了解到拖拽事件，鼠标拖拽效果常见于用户自定义展示页面，比如qq空间，x宝店铺装修等，操作灵动，所见即所得；或者是一个简单modal移动效果，方便用户查看原网页的内容。那么怎么灵活的实现鼠标的拖拽呢？

在接触到这类问题时，首先是查阅相关博客，要有一个解答的基本思路，切忌盲目敲代码，实现鼠标的拖拽主要分为三个步骤：

1.  onmousedown：鼠标按下事件，获取鼠标点击时在div中的相对位置。

2.  onmousemove：鼠标移动事件，元素的位置 = 就是鼠标的位置 - 刚才的差值。

3.  onmouseup：鼠标抬起事件，给鼠标移动和鼠标放开赋值null，除非再次点击，否则不会有任何移动效果。

拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化;元素的移动就是style.position的 top和left的改变。当然，并不是任何时候移动鼠标都要造成元素的移动，而应该判断鼠标左键的状态是否为按下状态，是否是在可拖拽的元素上按下的。

先设置div的样式，设置绝对定位，脱离文档流，便于拖拽。

拖拽功能(主要是触发三个事件：onmousedown\onmousemove\onmouseup) 

点击某物体时，move和up是全局区域，也就是整个文档通用，应该使用document对象，鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离。

控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条。

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

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

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