翻译后的元素回到原点？

Question

我之前发布过，但我更改了很多代码，但问题是一样的。我试图在鼠标移动后翻译一个元素。这是代码：

<svg id="m" width="40" height="40">
        <circle cx="20" cy="20" r="20" fill="red" stroke="red" stroke-width="1"/>
    </svg>
    
    <script>
let m = document.getElementById("m");
 
let start = function(e) {
  var speedX = Math.abs(e.movementX);
  var speedY = Math.abs(e.movementY);
  
  m.style.transform = `translate(${speedX}px, ${speedY}px)`;
};
 
document.addEventListener("mousemove", e => start(e));
    </script> 

我也想知道如何添加方向，但只有在解决了这个问题之后。非常感谢

Answer 1

您正在平衡当前运动的位置。

您想要的是添加运动（不是绝对值）到当前位置。

记住：position = position + velocity。

您还可以通过在单击时移动它来改善行为，以避免它离开屏幕并做出不希望的动作。

例如：

let m = document.getElementById("m");
let posX = 0;
let posY = 0;

let update = function(e) {
  posX += e.movementX;
  posY += e.movementY;

  m.style.transform = `translate(${posX}px, ${posY}px)`;
};

// Listen to movement when mousedown.
document.addEventListener("mousedown", () => {
  document.addEventListener("mousemove", update);
});

// Remove movement when mouseup.
document.addEventListener("mouseup", () => {
  document.removeEventListener("mousemove", update);
});

<svg id="m" width="40" height="40">
  <circle cx="20" cy="20" r="20" fill="red" stroke="red" stroke-width="1"/>
</svg>