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

Question

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

Answer 1

DragEvent接口是一个DOM事件，表示拖放交互。 该接口从MouseEvent和Event继承属性 （您可以在此处阅读更多内容）。 而当将指针设备（通常是鼠标）移到连接了侦听器的元素上时，将触发mouseEvents 。 你可以在这里阅读更多

Answer 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示例