代码之家 › 专栏 › 技术社区 › Payton Burdette

在每个mousemove上,可拖动元素的位置被重置为零

draggable mouseevent css javascript

Payton Burdette · 技术社区 · 6 年前

我正在研究一个在容器中移动部件关系图的组件。现在,第一个鼠标上的一切都很好,但第二个鼠标上的定位样式被重置为零。

我在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;
})

1 回复 | 直到 6 年前

Chan MT 6 年前

当你按下鼠标时,你总是设置 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