js拖拽效果的原理及实现

js拖拽效果的原理及实现

拖拽的3个事件

• onmousedown：鼠标按下事件
• onmousemove：鼠标移动事件
• onmouseup：鼠标抬起事件

原理

鼠标在元素上按下的时候{ 拖拽状态=1 记录下鼠标的x和y坐标 记录下元素的x和y坐标}

x: e.offsetX, y: e.offsetY 

鼠标在元素上移动的时候{ 如果拖拽状态是0就什么也不做。 如果拖拽状态是1，那么 元素y=现在鼠标y-原来鼠标y+原来元素y 元素x=现在鼠标x-原来鼠标x+原来元素x}

document.div.style.left = e.clientX - document.offset.x + "px";

鼠标在任何时候放开的时候{ 拖拽状态=0 如果鼠标释放，则执行移除事件侦听}

document.removeEventListener("mousemove", mouseHandler);
document.removeEventListener("mouseup", mouseHandler);

代码实现

 function mouseHandler(e) {
    //通过判断事件的类型来执行对应的条件语句
    if (e.type === "mousedown") {
      e.preventDefault();
      //这里将e.target赋给document.div,相当于设了一个局部变量，在触发mousemove事件后，
      //再次进入函数时，保证触发事件的div就是我们要改变位置的那个div
      document.div = e.target;
      //这里也是将鼠标相对拖拽的那个div元素
      //左上角的位置，设置成一个对象进行保存其实相当于如下两条
      document.offset = { x: e.offsetX, y: e.offsetY };
      //document.offsetx=e.offsetX;将e.offsetX赋值给自定义变量document.offsetx
      //document.offsety=e.offsetY;将e.offsetY赋值给自定义变量document.offsety
      //和上面是两种写法
      //在鼠标点击后，如果发生鼠标移动事件，则再次进入该函数进行执行鼠标移动的执行语句
      document.addEventListener("mousemove", mouseHandler);
      //在鼠标点击后，如果发生鼠标释放事件，则再次进入该函数进行执行，则再次进入该函数进行执行鼠标释放的执行语句
      document.addEventListener("mouseup", mouseHandler);
    } else if (e.type === "mousemove") {
      //判断触发的事件类型是mousemove之后执行
      //这里的document.div和document.offset.x都是之前定义好的变量，用e.clientX-document.offset.x
      //是因为元素的position位置是相对元素的左上顶点的位置的，因此鼠标所在的位置值不能直接赋给它。
      document.div.style.left = e.clientX - document.offset.x + "px";
      document.div.style.top = e.clientY - document.offset.y + "px";
    } else if (e.type === "mouseup") {
      //如果鼠标释放，则执行移除事件侦听
      document.removeEventListener("mousemove", mouseHandler);
      document.removeEventListener("mouseup", mouseHandler);
    }
 }