在每次鼠标移动时，可拖动元素的位置都被重置为零答案

【问题标题】：On each mousemove, the draggable element positioning is getting reset to zero在每次鼠标移动时，可拖动元素的位置都被重置为零
【发布时间】：2018-08-16 12:43:17
【问题描述】：

我正在开发一个在容器中移动部件图的组件。现在，第一次鼠标移动一切正常，但第二次定位样式被重置为零。

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

Codepen：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;
})

【问题讨论】：

标签： javascript css mouseevent draggable

【解决方案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

【讨论】：

非常感谢！