javascript - javascript，动态 div 移动

Question

我使用以下代码在网页上动态移动 div 块

function moveDiv(id){
var moveDivC = "#contenitore_dj_"+id;
var moveDivB = ".blocco-chat-contenitore";
var moveDivA = ".sposta-contenitore_"+id+" i.fa-arrows";

var dragItem = document.querySelector(moveDivC);
var container = document.querySelector(moveDivB);
var contar = document.querySelector(moveDivA);


    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;

    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) {
      if (e.type === "touchstart") {
        initialX = e.touches[0].clientX - xOffset;
        initialY = e.touches[0].clientY - yOffset;
      } else {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;
      }


      if (e.target === contar) {
        active = true;
      }
    }

    function dragEnd(e) {
      initialX = currentX;
      initialY = currentY;

      active = false;
    }

    function drag(e) {
      if (active) {
      
        e.preventDefault();

        if (e.type === "touchmove") {
          currentX = e.touches[0].clientX - initialX;
          currentY = e.touches[0].clientY - initialY;
        } else {
          currentX = e.clientX - initialX;
          currentY = e.clientY - initialY;
        }

        xOffset = currentX;
        yOffset = currentY;

        setTranslate(currentX, currentY, dragItem);
      }
    }

    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }

};

它可以工作，但不是我想要的那样，移动的 div 会适应并开始，并且即使在释放时也保持连接到光标。

你能帮我理解我哪里出错了吗？这就是问题所在

• 当我移动它时，div 会断断续续地开始
• div 从 div .block-chat-c​​ontainer 的内容中突出，而不是我希望它留在里面
• 即使在释放时，div 有时也会粘贴到光标上

你有什么想法？提前致谢

代码html；

<div class="blocco-chat-contenitore">

<div class="contenitore-video-youtube" id="contenitore_dj_2" > <div class="sposta-contenitore_2"><i class="fa fa-arrows" aria-hidden="true"></i></div> </div>





<div class="blocco-chat-sinistro"></div>
<div class="blocco-chat-destro"></div>

</div>

标签： javascripthtml