如何在JavaScript中使用鼠標事件（mousedown，mousemove事件）來模擬拖動事件

如何在JavaScript中使用鼠標事件（mousedown，mousemove事件）來模擬拖動事件。我想以編程方式創建拖動事件，觸發鼠標事件。如何在JavaScript中使用鼠標事件（mousedown，mousemove事件）來模擬拖動事件

來源

2017-08-01 user3704565

可以使用外部庫？ rxjs？ jQuery的？與純JavaScript的會很長，容易出錯。 – Val

通常這是通過將一個mousedown偵聽器附加到一個元素來完成的，該元素隨後將一個mousemove和mouseup偵聽器附加到該文檔。在鼠標移動監聽器中，您移動「可拖動」，並且在mouseup監聽器中，您可能會「拖放」「可拖動」，並從文檔中移除mouseup和mousemove監聽器。「可拖動」的座標存儲到外部範圍，以便所有聽衆都可以訪問它們。 – Teemu

DragEvent接口是一個表示拖放交互的DOM事件。 此接口繼承了MouseEvent和事件 的屬性（您可以閱讀更多here）。而mouseEvents在指針設備（通常是鼠標）移動到已連接偵聽器的元素上時觸發。你可以閱讀更多here

來源

2017-08-01 10:37:24

// 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

來源

2017-08-01 10:54:31 oboshto

如何在JavaScript中使用鼠標事件（mousedown，mousemove事件）來模擬拖動事件

回答

相關問題