Question

我正在研究一个组件，该组件可以在容器中移动零件图。现在，一切都在第一次鼠标移动时运行良好，但是在第二次时，定位样式将重置为零。

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

Codepen：https://codepen.io/paytonburd/pen/WKqEjo

代码：

=>getparameter1()

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

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

1 个答案: