victor151222/js_move_drag

js实现的简单的鼠标拖拽效果

js_move_drag

js实现的简单的鼠标拖拽效果 首先我实现的效果是：

鼠标按下后，才可以执行后续效果
鼠标已经按下，然后鼠标移动，需要拖拽的元素跟着一起移动
鼠标松开，然后停止移动

大步骤就是这样一个过程，其实对应的就是三个事件：

onmousedown
onmousemove
onmouseup

然后我们来看这三个事件发生时分别作做什么事。

当鼠标按下时，我们得记录当前元素的位置newSite。同时设置一个标记，用于表示此时鼠标时按下的状态，方便鼠标移动事件的执行。 当鼠标松开时，我们要将标记改变，说明此时鼠标松开了，当鼠标移动时就不能再移动元素了。 当鼠标按下并且移动时，我们就要记录鼠标每次移动的位置currentSite，currentSite和newSite的差值就是鼠标移动的距离， 同时也是元素应该移动的距离，然后设置元素的位置就OK了。

当然有个很重要的点就是需要移动的元素的position属性应该设为absolute或者relative，这样元素才可以移动。 同时，如果该元素内部有可能导致浏览器默认事件发生的元素时，要阻止默认事件的发生，例如里面有一个图片时， 点击拖动的时候浏览器会默认弹出一个新窗口显示该图片，这时我们应该阻止这个事件的发生。