如何在同一个类中使两个元素可拖动

问题描述

我有2个div，我想使用一组代码使它们都可拖动，因此无论单击哪个，都可以在屏幕上拖动。目前，只有一个是可拖动的。我该如何解决？

<div class="mydiv">
  <div class="mydivheader">Click here to move</div>
</div>

    <div class="mydiv">
    <div class="mydivheader">Click here to move</div>
    </div>

let mydivs = document.getElementsByClassName("mydiv")
    for (mydiv of mydivs) {
        mydiv = mydiv
    }
dragElement(mydiv);

function dragElement(elmnt) {
  var pos1 = 0,pos2 = 0,pos3 = 0,pos4 = 0;
    elmnt.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    e = e || window.event; 
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

解决方法

在您的代码mydiv = mydiv中创建一个全局变量，该变量将在每次迭代时覆盖。

您需要将呼叫移至循环内的dragElement。像这样...

for (mydiv of mydivs) {
    dragElement(mydiv);
}