如何在 JavaScript 中使用鼠标事件（mousedown、mousemove 事件）模拟拖动事件答案

【问题标题】：How can i simulate drag event using mouse events(mousedown, mousemove events) in JavaScript如何在 JavaScript 中使用鼠标事件（mousedown、mousemove 事件）模拟拖动事件
【发布时间】：2017-08-01 10:27:24
【问题描述】：

如何在 JavaScript 中使用鼠标事件（mousedown、mousemove 事件）模拟拖动事件。我想以编程方式创建拖动事件，触发鼠标事件。

【问题讨论】：

可以使用外部库吗？ rxjs？ jQuery？使用纯 javascript 会很长且容易出错。
通常这是通过将 mousedown 侦听器附加到元素来完成的，然后将 mousemove 和 mouseup 侦听器附加到文档。在 mousemove 侦听器中，您移动“可拖动”，在 mouseup 侦听器中，您可能“放下”“可拖动”并从文档中删除 mouseup 和 mousemove 侦听器。 “可拖动”的坐标存储在外部范围内，以便所有侦听器都可以访问它们。

标签： javascript mouseevent

【解决方案1】：

DragEvent 接口是一个表示拖放交互的 DOM 事件。 这个接口继承了 MouseEvent 和 Event 的属性 （您可以阅读更多here）。而 mouseEvents 在指针设备（通常是鼠标）移动到附加了侦听器的元素上时会触发。你可以阅读更多here

【讨论】：

【解决方案2】：

// add mousedown handler    
document.addEventListener('mousedown', handleMousedown);

function handleMousedown() {
  // on mousedown add listeners
  document.addEventListener('mouseup', handleMouseup);
  document.addEventListener('mousemove', handleMousemove);
}

function handleMousemove(event) {
  // let's make some magic
}

function handleMouseup() {
  // on mouseup remove listeners
  document.removeEventListener('mouseup', handleMouseup);
  document.removeEventListener('mousemove', handleMousemove);
}

jsfiddle example

【讨论】：

这不是模拟拖动事件。
@ChaseChoi 为什么不呢？你可以实现这样的东西：jsfiddle.net/oboshto/5c287Lzq/13 类似于我的拖动。这个问题的作者询问了使用鼠标事件的实现，我展示了一种方法。
作者希望MouseEvent 更可能触发鼠标事件而不移动实际光标。你的答案只是监听鼠标事件。