如何解决如何在同一个类中使两个元素可拖动
我有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);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。