[英]How to make two elements draggable in the same class
I have 2 divs and I want to make them both draggable using one set of code, so whichever one that is clicked can be dragged across the screen At the moment, only one is draggable.我有 2 个 div,我想使用一组代码使它们都可拖动,因此无论单击哪个,都可以在屏幕上拖动。目前,只有一个可拖动。 How do I fix this?
我该如何解决?
<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;
}
}
In your code mydiv = mydiv
creates a global variable which is overwrite every iteration.在您的代码中
mydiv = mydiv
创建一个全局变量,该变量在每次迭代时都会被覆盖。
You need to move the call to dragElement
inside the loop.您需要将调用移动到
dragElement
内的dragElement
。 Like so...像这样...
for (mydiv of mydivs) {
dragElement(mydiv);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.