[英]How to make two elements draggable in the same class
我有 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
内的dragElement
。 像这样...
for (mydiv of mydivs) {
dragElement(mydiv);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.