javascript - mouse moveX 如何处理拖动事件？

Question

我正在尝试设置动态可拖动元素，该元素将根据拖动增量移动其 anchor 。但是，我似乎无法使用 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)