js拖拽html元素工具类

复制就能用的拖拽js方法

原生js实现
拖拽元素方法

  makeItMoveable = (elem, box) => {
    let move_enable = false;
    let offsetLeft; // 上次鼠标点击位置到左边的距离
    let offsetTop;  // 上次鼠标点击位置到上边的距离
    elem.addEventListener('mousedown', (e) => {
        offsetLeft = e.clientX;
        offsetTop = e.clientY;
        move_enable = true;
        console.log('点击元素', offsetLeft, offsetTop, move_enable);
    })
    
    // 需要在父元素box上监听移动事件，而不是被移动的元素上，否则移动得过快可能鼠标会滑出div，就移不动了
    box.addEventListener('mousemove', (e) => {
      console.log(move_enable)
      if (move_enable) {
        // 计算位移
        let dx = e.clientX-offsetLeft;
        let dy = e.clientY-offsetTop;
        let cx = elem.offsetLeft + dx;
        let cy = elem.offsetTop + dy;
        elem.style.setProperty('left', cx + 'px');
        elem.style.setProperty('top', cy + 'px');
        
        offsetLeft = e.clientX;
        offsetTop = e.clientY;
        console.log('移动元素', cx, cy);
      }
    })
    
    box.addEventListener('mouseup', (e)=> {
        console.log('结束移动元素');
        move_enable=false;
    })
  }
 const drop = (id, pid) => {
      const div = document.querySelector(`#${id}`);
      const box = document.querySelector(`#${pid}`);
      makeItMoveable(div, box);
  }

使用（注意拖拽目标元素需绝对定位 position: 'absolute/fixed'）

drop(id: string, parentId: string); // id: 需要拖拽元素的id; parentId: 父元素的id;