js拖拽效果的原理及实现

js拖拽效果的原理及实现

实现拖拽要注意三个事件：
1、mousedown: 鼠标按下事件
2、mousemove: 鼠标移动事件
3、mouseup: 鼠标松开事件
注意：1、 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置，使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽。
2、当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件

用代码实现：

var div=document.querySelector("div");
        // offsetX,offsetY 相对目标对象的左上角位置 
        var offsetX,offsetY;
        div.addEventListener