在js中使用mousedown/mouseup，无法更改元素的位置

Question

我在div标签中使用div标签创建了一组点。我的需要是当我拖动最后一个点时，整组点应该移动并位于当前放置鼠标指针的位置。我尝试使用addeventlistner鼠标单击来实现它，但尝试失败了。

有人可以指出下面部分中的直觉吗？

var dots = document.createElement("div");
dots.className = "dots";
document.body.appendChild(dots);
var dotarray = [];
for (index = 0; index < 10; index++) {
  dotarray[index] = document.createElement("div");
  dotarray[index].className = "dot";
  dots.appendChild(dotarray[index]);
}
dotarray[9].addEventListener("mousedown", function(event) {
  if (event.which == 1) {
    var currentMousePointerPos, latestMousePointerPos;
    currentMousePointerPos = event.pageX;
    dotarray[9].addEventListener("mouseup", function(event) {
      latestMousePointerPos = event.pageX;
      if (currentMousePointerPos != latestMousePointerPos) {
        dots.style.marginLeft = currentMousePointerPos + latestMousePointerPos;
      }
    })
  }
})

.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: red;
  display: inline-block;
  margin-left: 5px;
}
.dots {
  border: 1px solid black;
  width: 135px;
}

Answer 1

您的问题的直接答案是dots.style.marginLeft需要等于包含单位的字符串。
因此，这将起作用：

dots.style.marginLeft = ((currentMousePointerPos+latestMousePointerPos) + "px");

然而：

1. 您的mouseup侦听器仅侦听鼠标单击在元素上时释放的事件，因此它不会执行太多操作。如果将侦听器分配给整个文档，则无论mouseup事件发生在何处，侦听器的功能都将被激活。
2. currentMousePointerPos + latestMousePointerPos并不表示鼠标的最终位置。

如果我们修复这两个问题，将代码仍然运行得很奇怪，因为dots元素的左侧设置为鼠标的最后一个位置。
因此，我们只需要从 marginLeft 属性中减去元素的宽度。

以下代码结合了我提到的所有内容：

var dots = document.createElement("div");
dots.className = "dots";
document.body.appendChild(dots);
var dotarray = [];
for (index = 0; index < 10; index++) {
  dotarray[index] = document.createElement("div");
  dotarray[index].className = "dot";
  dots.appendChild(dotarray[index]);
}
dotarray[9].addEventListener("mousedown", function(event) {
  if (event.which == 1) {
    var currentMousePointerPos;
    // Notice how the listener is bound to the whole document
    document.addEventListener("mouseup", function(event) {
      currentMousePointerPos = event.pageX;
      dots.style.marginLeft = ((currentMousePointerPos-dots.offsetWidth) + "px");
    })
  }
})

.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: red;
  display: inline-block;
  margin-left: 5px;
}
.dots {
  border: 1px solid black;
  width: 135px;
}

Answer 2

这是你要找的吗？

应改用 mousemove 事件来检测任何拖动 mousedown后.

var dots = document.createElement("div");
dots.className = "dots";
document.body.appendChild(dots);
var dotarray = [];
for (index = 0; index < 10; index++) {
  dotarray[index] = document.createElement("div");
  dotarray[index].className = "dot";
  dots.appendChild(dotarray[index]);
}
dotarray[9].addEventListener("mousedown", function(event) {
  if (event.which == 1) {
	window.addEventListener('mousemove', move, true);
    /*var currentMousePointerPos, latestMousePointerPos;
    currentMousePointerPos = event.pageX;
    dotarray[9].addEventListener("mouseup", function(event) {
      latestMousePointerPos = event.pageX;
      if (currentMousePointerPos != latestMousePointerPos) {
        dots.style.marginLeft = currentMousePointerPos + latestMousePointerPos;
      }
    })*/
  }
});
window.addEventListener("mouseup", function(event) {
	window.removeEventListener('mousemove', move, true);
});
function move(e){
    var div = document.getElementsByClassName('dots')[0];
  div.style.position = 'absolute';
  div.style.top = -8+e.clientY + 'px';
  div.style.left = -135+8+e.clientX + 'px';
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: red;
  display: inline-block;
  margin-left: 5px;
}
.dots {
  border: 1px solid black;
  width: 135px;
}