代码之家 › 专栏 › 技术社区 › Gunacelan M

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

addeventlistener css html javascript

Gunacelan M · 技术社区 · 7 年前

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

2 回复 | 直到 7 年前

GalAbra 7 年前

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

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

然而:

你的 mouseup 侦听器只侦听鼠标单击在元素上时释放的事件,所以它没有做太多工作。如果将侦听器分配给整个文档,则无论 松开鼠标 事件发生。
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;
}

-1

Sreekanth Reddy Balne 7 年前

这就是你要找的吗?

您应该使用 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;
}