我的问题是,当我在文档上添加鼠标移动监听器时,所有 div 都在移动,但是当我在元素上添加鼠标移动监听器时,我必须缓慢移动光标。
这是我的代码:
let componentsItems = document.getElementsByClassName("componentItem");
[].forEach.call(componentsItems, function (componentItem) {
componentItem.addEventListener("click", function (event) {
let selectedComponent = getComponentToDisplay(event.target.getAttribute("data-exchange"));
let mapContainer = document.getElementById("mapContainer");
let mainElement = document.createElement("div");
mainElement.innerHTML = "test";
mainElement.style.position = "absolute";
mapContainer.appendChild(mainElement);
mainElement.addEventListener("mouseup", function (e) {
isDown = false;
});
mainElement.addEventListener("mousedown", function (e) {
isDown = true;
offset = [
mainElement.offsetLeft - e.clientX,
mainElement.offsetTop - e.clientY
];
});
document.addEventListener("mousemove", function (e) {
e.preventDefault();
mousePosition = {
x: e.clientX,
y: e.clientY
};
let left = (mousePosition.x + offset[0]);
let top = (mousePosition.y + offset[1]);
if(isDown){
if(mapContainer.offsetTop < top && mapContainer.offsetWidth > left){
mainElement.style.left = left + 'px';
mainElement.style.top = top + 'px';
}
}
});
});
});
对于菜单中的每个组件,我向“MapContainer”div 中的appendChild 元素添加一个onclick 监听器。
最佳答案
拖放问题。
问题是您将多个 mousemove 监听器附加到文档,并且每个监听器都具有不同的 mainElements。
解决办法:
记住我们要移动哪个元素。
mainElement.addEventListener("mousedown", function (e) {
isDown = true;
element = mainElement;
offset = [
mainElement.offsetLeft - e.clientX,
mainElement.offsetTop - e.clientY
];
});
在外部作用域(foreach 之外)创建一个唯一的 mousemove 事件监听器,并更新我们之前鼠标按下的元素。
document.addEventListener("mousemove", function (e) {
e.preventDefault();
mousePosition = {
x: e.clientX,
y: e.clientY
};
let left = (mousePosition.x + offset[0]);
let top = (mousePosition.y + offset[1]);
if(isDown){
if(mapContainer.offsetTop < top && mapContainer.offsetWidth > left){
element.style.left = left + 'px';
element.style.top = top + 'px';
}
}
});
解决此问题的其他方法是分别在 mousedown 和 mouseup 事件处理程序上创建(和删除)事件监听器。但我相信它的效率较低,而且肯定更复杂。
关于javascript - 在同一页面上移动多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50832675/