js实现元素可拖拽方法

 业务需要：Vue+element plus实现对弹框进行拖拽，并可拖拽到显示页面的外面，而element提供的拖拽只能在当前页面不可超出。所以手写了拖拽方法。

实现效果

 拖拽方法

     function dragElement(ele) {
        ele.addEventListener("mousedown", function (e) {
          // 取消浏览器默认事件
          e.preventDefault();

          // 存储鼠标位置
          var mouseX = e.clientX;
          var mouseY = e.clientY;

          // 存储元素当前位置
          var initX = draggableElement.offsetLeft;
          var initY = draggableElement.offsetTop;

          // 添加鼠标移动事件监听器
          document.addEventListener("mousemove", onMouseMove);
          // 添加鼠标抬起事件监听器
          document.addEventListener("mouseup", onMouseUp);

          function onMouseMove(e) {
            // 计算鼠标移动的距离
            var deltaX = e.clientX - mouseX;
            var deltaY = e.clientY - mouseY;

            if (window.innerWidth - 20 > e.clientX && e.clientX > 20) {
              // 将元素移动到新的位置，这里的加上deltaX和deltaY是因为我们需要将元素移动到鼠标点击位置的右边和下边
              draggableElement.style.left = initX + deltaX + "px";
            }

            if (window.innerHeight - 20 > e.clientY && e.clientY > 20) {
              draggableElement.style.top = initY + deltaY + "px";
            }
          }

          function onMouseUp() {
            // 移除鼠标移动和抬起事件监听器
            document.removeEventListener("mousemove", onMouseMove);
            document.removeEventListener("mouseup", onMouseUp);
          }
        });
      }

对方法进行使用

<div
      id="box"
      style="
        width: 100px;
        height: 100px;
        background-color: brown;
        position: absolute;
      "
></div>

<script>
 const draggableElement = document.querySelector("#box");
 dragElement(draggableElement)
</script>

注意：绑定的元素一定要设置css样式“position: absolute;”，父元素可设置“overflow: hidden”，防止出现滚动条。