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");

然而：

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

如果我们解决了这两个问题，那么遗嘱代码仍会很奇怪，因为dots元素的左侧设置为鼠标的最后位置。
因此，我们只需要从marginLeft属性中减去元素的宽度。

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

＆＃13;

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");
    })
  }
})

＆＃13;

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

＆＃13;

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;
}

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

2 个答案: