元素拖拽 单个与多个

基础知识

1.鼠标按下 onmousedown
2.鼠标移动 onmousemove
3.鼠标抬起 onmouseup

---

image.png

pageX与clientX
pageX是距离整个页面的x轴距离(包括滚动条滚动看不到那部分的页面)
clientX是目前可视区域的页面
当页面无滚动条时 e.pageX=e.clientX

---

小知识 组织默认事件
modal.oncontextmenu=e=>{
e.preventDault() 鼠标右键菜单，阻止这个默认事件
}

单个元素拖拽

1.html

 <div  id="box"><div>

2.js

      let modal = document.getElementById('box');
      let x = 0, y = 0,canMove=false
      let maxX = window.innerWidth - modal.offsetWidth;
      let maxY = window.innerHeight - modal.offsetHeight;
      //x = e.pageX - modal.offsetLeft;
     // y = e.pageY - modal.offsetTop;


      modal.onmousedown = (e) => {
        canMove = true;
      x = e.pageX - modal.offsetLeft; //在box内部按下时候 记录鼠标e相对于box的上下距离
      y = e.pageY - modal.offsetTop;

      }
      window.onmousemove = (e) => {
        //e.preventDefault && e.preventDefault();
        if (canMove) {  //标识 只有在box并且按下时才能移动
          let modalX = e.pageX - x, //减去x  始终让鼠标在box上(相对位置不变)
            modalY = e.pageY - y;
          if (modalX < 0) modalX = 0;  //最小x轴偏移
          else if (modalX > maxX) modalX = maxX; //最大x轴偏移
          if (modalY < 0) modalY = 0;
          else if (modalY > maxY) modalY = maxY;
          modal.style["left"] = modalX + "px"; //box随鼠标移动
          modal.style["top"] = modalY + "px";
        }
      };
      window.onmouseup = (e) => {
        canMove = false;
      };

多个元素的拖拽

1.html

<div>
<div class="box" id="box1"  @mousedown="drag($event,'box1')" >
        <div>
<div class="box" id="box2"  @mousedown="drag($event,'box2')" >
        <div>
<div class="box" id="box3"  @mousedown="drag($event,'box3')" >
        <div>
</div>

2.js

    drag(e,r) {
      let modal = document.getElementById(r);
      let x = 0, y = 0;
      let maxX = window.innerWidth - modal.offsetWidth;
      let maxY = window.innerHeight - modal.offsetHeight;
      x = e.pageX - modal.offsetLeft;
      y = e.pageY - modal.offsetTop;

      window.addEventListener("mousemove", move);
      function move(e) {
        e.preventDefault && e.preventDefault();
        let modalX = e.pageX - x,
        modalY = e.pageY - y;
        if (modalX < 0) modalX = 0;
        else if (modalX > maxX) modalX = maxX;
        if (modalY < 0) modalY = 0;
        else if (modalY > maxY) modalY = maxY;
        modal.style["left"] = modalX + "px";
        modal.style["top"] = modalY + "px";
      }
      // 添加鼠标抬起事件，鼠标抬起，将事件移除
      window.addEventListener("mouseup", function() {
        window.removeEventListener("mousemove", move);
      });
      // 鼠标离开父级元素，把事件移除
      window.addEventListener("mouseout", function() {
        window.removeEventListener("mousemove", move);
      });
      

    },