javascript - 在同一页面上移动多个 div
问题描述
我的问题是当我在文档上添加 mousemove 侦听器时,所有 div 都在移动,但是当我在元素上添加 mousemove 侦听器时,我必须慢慢移动光标。
这是我的代码:
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 事件侦听器,并更新我们之前 mousedowned 的元素。
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 事件处理程序上创建(和删除)事件侦听器。但我相信它的效率较低,而且肯定更复杂。