Question

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

Answer 1

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

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 example

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

2 个答案: