Question

我正在尝试设置动态可拖动元素，该元素将根据拖动增量移动其锚点。但是，我似乎无法使用event.movementX或event.movementY获取增量。

我的简单拖动事件代码：

mainMenuDiv.addEventListener("drag", (event)=>{
   console.log(event.movementX, event.movementY);
});

// The console print out is simply:
//>0 0
// This prints out a lot of times as i drag the mouse but doesn't change the properties.

我想我错过了movement属性与drag事件一起使用的方式。

Answer 1

我也无法使其正常工作，所以我做了以下工作：

var start = null, delta = null

el.addEventListener('dragstart', e => {
    start = {x: e.clientX, y: e.clientY}
})

el.addEventListener('drag', e => {
    delta = {x: e.clientX - start.x, y: e.clientY - start.y}
})

el.addEventListener('dragend', e => start = delta = null)

鼠标移动X如何处理拖动事件？

1 个答案: