js拖拽移动效果
需求
有时候需要对某一元素进行拖拽，并要求在拖拽过程中跟随鼠标进行移动；比如下面的效果：
实现
可以依靠mousedown，mousemove和mouseup三个js原生事件来实现；除了被拖动的元素之外，还需要一个用来充当『容器』的元素，被拖动的元素为『容器』元素的子元素；
-
为需要被拖动的元素绑定
mousedown事件，并在mousedown事件中为『容器』元素绑定mousemove元素； -
根据具体需求和
event对象的clientX以及clientY属性，在mousemove事件中更新被拖动元素的位置； -
为『容器』元素绑定
mouseup事件，且在mouseup事件中移除『容器』元素的所有mousemove事件！
why?
- 为什么是对『容器』元素绑定
mousemove事件，而不是直接对被拖动的元素进行绑定？
因为被拖动的元素（实时更新位置后）跟不上鼠标移动的速度，所以很有可能鼠标在拖动过程中超出了被拖动元素本身的范围，导致拖动停止！
- 为什么是对『容器』元素绑定
mouseup事件，而不是直接对被拖动的元素进行绑定？
同上，鼠标若移出被拖动元素的范围后再松开按键就不会奏效！
移动端的实现
在移动端是没有mousedown,mousemove,mouseup事件的，但是有相对应的移动端事件：touchatart、touchmove、touchend；所以移动端的原理也是类似的。