dom元素在容器中拖动实现

最新推荐文章于 2023-03-22 23:21:27 发布

wzq2011

最新推荐文章于 2023-03-22 23:21:27 发布

阅读量256

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/wzq2011/article/details/128954178

版权

有时候会有这样的需求，将页面上某个元素拖动到任意位置，看起来挺简单的一个需求，但可能会遇几个问题

绑定拖动事件的元素，并非实际拖动的元素

    <div id="draggable">
      <img src="src_url" />
    </div>

在#draggable元素上绑定了拖动事件，但很多情况下实际拖动的是img元素
这里可以在绑定事件的地方，event取当前绑定元素，即event.currentTarget。
也可以给img元素一个样式

img{
 pointer-events: none;
}

当拖动元素离开父元素

  <div id="container">
    <div id="draggable">
      <img src="src_url" />
    </div>
  </div>

当#container元素有高宽，并且overflow:hidden，#draggable元素被拖动到父元素边缘时，需要把mouseout事件加上，并做个延迟

代码在这里

<html>

<head>
  <style>
    #draggable {
      position: absolute;
      width: 150px;
      height: 150px;
      background-color: green;
    }

    #container {
      position: relative;
      width: 600px;
      height: 600px;
      overflow: hidden;
      border: 1px solid;
    }

    #inner {
      /* pointer-events: none; */
      width: 100px;
      height: 100px;
      background-color: beige;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div id="container">
    <div id="draggable">
      <div id="inner" draggable="false"></div>
    </div>
  </div>
  <script>
    const draggable = document.getElementById("draggable");
    let isDragging = false;
    let currentX;
    let currentY;
    let initialX;
    let initialY;
    let xOffset = 0;
    let yOffset = 0;

    let timer;

    draggable.addEventListener("mousedown", dragStart);
    draggable.addEventListener("mouseup", dragEnd);
    draggable.addEventListener("mouseout", dragEndDelay);
    draggable.addEventListener("mousemove", drag);

    // 这个可有可无
    draggable.addEventListener("click", (e) => {
      // e.target.style.zIndex = 100;
      e.preventDefault();
    });

    function dragEndDelay(e) {
      setTimeout(() => {
        isDragging = false;
      }, 100);
    }

    function dragStart(e) {
      initialX = e.clientX - xOffset;
      initialY = e.clientY - yOffset;
      isDragging = true;
      e.target.style.zIndex = 100;
      console.log(e.target)
    }

    function dragEnd(e) {
      isDragging = false;
      e.target.style.zIndex = "";
    }

    function drag(e) {
      if (isDragging) {
        e.preventDefault();
        clearTimeout(timer);
        timer = setTimeout(function () {
          currentX = e.clientX - initialX;
          currentY = e.clientY - initialY;
          xOffset = currentX;
          yOffset = currentY;
          setTranslate(currentX, currentY, draggable);
        }, 0);
      }
    }
    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }

  </script>
</body>

</html>