javascript - 在每次移动鼠标时，可拖动元素的定位都会重置为零

Question

我正在开发一个组件，它可以在容器中四处移动零件图。现在，第一次移动鼠标时一切正常，但第二次移动时，定位样式将重置为零。

我在 Vue 之外重新编写了代码，还制作了一个代码笔供您查看。

代码笔:https://codepen.io/paytonburd/pen/WKqEjo

代码:

let diagram = document.getElementById('diagram')
let diagramImg = document.getElementById('diagram-image')
let startX;
let startY;
let walkX;
let walkY;
let dragging = false;

diagram.addEventListener('mousedown', (e) => {
  dragging = true;
  startX = e.pageX - diagram.offsetLeft;
  startY = e.pageY - diagram.offsetTop;
})

diagram.addEventListener('mousemove', (e) => {
  if (!dragging) return;
  e.preventDefault();
  let x = e.pageX - diagram.offsetLeft;
  let y = e.pageY - diagram.offsetTop;

  walkX = x - startX
  walkY = y - startY
  console.log(walkX, walkY)

  diagramImg.style.top = walkY + 'px'
  diagramImg.style.left = walkX + 'px'
})

diagram.addEventListener('mouseleave', () => {
  dragging = false;
})

diagram.addEventListener('mouseup', () => {
  dragging = false;
})

Answer 1

当您按下鼠标时，您总是将 startX 和 startY 设置为相对于 diagram 的位置，它始终为 0， 0 并且从不移动。

我想你想要的是将它们设置为相对于图表图像的当前位置:

let diagram = document.getElementById('diagram')
let diagramImg = document.getElementById('diagram-image')
let startX;
let startY;
let walkX;
let walkY;
let dragging = false;

diagram.addEventListener('mousedown', (e) => {
  dragging = true;
  //This is where it went wrong
  startX = e.pageX - diagramImg.offsetLeft; 
  startY = e.pageY - diagramImg.offsetTop; 
})

diagram.addEventListener('mousemove', (e) => {
  if (!dragging) return;
  e.preventDefault();
  let x = e.pageX - diagram.offsetLeft;
  let y = e.pageY - diagram.offsetTop;

  walkX = x - startX
  walkY = y - startY
  console.log(walkX, walkY)

  diagramImg.style.top = walkY + 'px'
  diagramImg.style.left = walkX + 'px'
})

diagram.addEventListener('mouseleave', () => {
  dragging = false;
})

diagram.addEventListener('mouseup', () => {
  dragging = false;
})

https://codepen.io/anon/pen/yqdzyq?editors=1111