Question

我不知道为什么 note.style.left = (e.clientX - offLeft) + "px"; 和 note.style.top = (e.clientY - offTop) + "px"; 不会自动更新。
我看了很多例子。来自stackoverflow的一些权利。而且我已经console.log（）找出了每个变量，但我无法弄清楚。起初，我认为数字未正确减去，因为它们可能是字符串。我做了typeof并确认它们是数字并且数学正确。我确保style.left实际上可以使用 note.style.left = 25 + "px"; 设置一个数字。因此，这意味着我可以正确访问该属性。

我不知道发生了什么。我花了几天时间看几行代码和loggin，并看了w3c，在我看来代码应该可以工作。它不会哈哈。我真的很感谢您的帮助。

仅供参考-我意识到我尚未应用mouseup和/或删除事件监听器。我正在努力一次迈出一步。

var note = document.getElementById("test-note");
var show = document.getElementById("output");

note.addEventListener("mousedown", mouseDown);

function mouseDown(e){
  note.addEventListener("mousemove", mouseMove);
}

function mouseMove (e){
  //console.log(e);
  var offLeft = e.clientX - e.srcElement.offsetLeft;
  var offTop = e.clientY - e.srcElement.offsetTop;
  note.style.left = (e.clientX - offLeft) + "px";
  note.style.top = (e.clientY - offTop) + "px";
  show.innerHTML = note.style.left;
  //console.log(typeof (e.clientX + "px"));
}

#test-note{
  border: 1px solid black;
  left: 50px;
  top: 25px;
  position: absolute;
}
#output{
    position: absolute;
    left: 100px;
    top: 150px;
}

<div id="test-note">This is my test note</div>

<p id="output"></p>

Answer 1

问题不在于更新，而是值始终相同。

 (e.clientX - offLeft) = (e.clientX - (e.clientX - e.srcElement.offsetLeft)) = e.srcElement.offsetLeft;

e.srcElement.offsetLeft等于您设置的左值，因此它将以相同的初始值不断变化。

您需要更改逻辑，在mousedown处理程序中进行offLef/offTop的计算，以使其成为mousemouve处理程序中的常量。您还应该使用target instead of srcElement

var note = document.getElementById("test-note");
var show = document.getElementById("output");

note.addEventListener("mousedown", mouseDown);
var offLef;
var offTop;

function mouseDown(e){
  note.addEventListener("mousemove", mouseMove);
  offLeft = e.clientX - e.srcElement.offsetLeft;
  offTop = e.clientY - e.srcElement.offsetTop;
}

function mouseMove (e){
  //console.log(e);
  note.style.left = (e.clientX - offLeft) + "px";;
  note.style.top = (e.clientY - offTop) + "px";;
  show.innerHTML = note.style.left;
  //console.log(typeof (e.clientX + "px"));
}

#test-note{
  border: 1px solid black;
  left: 50px;
  top: 25px;
  position: absolute;
}
#output{
    position: absolute;
    left: 100px;
    top: 150px;
}

<div id="test-note">This is my test note</div>

<p id="output"></p>

style.left将不会更新

1 个答案: