drag and drop

了解如何使用 Drag and Drop API 為您的使用者創建交互式體驗 使用 Drag and Drop API，您可以定義頁面中的哪些元素是可拖動的，並在用戶拖動元素時攔截它。 它在現代瀏覽器中得到了很好的支持： 在我們開始研究這個 API 之前，我們必須知道如何定義頁面中的可拖動元素。我們可以通過在頁面的 HTML 中添加 draggable 屬性並將其設置為 true 來實現： <div draggable="true"> ... </div> 這就足以使元素成為可拖動的。 提示：圖片、文字選擇和鏈接默認情況下是可拖動的，除非您在它們上面設置了 draggable 為 false。 我們還可以從用戶計算機中將文件拖動到瀏覽器中。在這種情況下，我們傳輸的是文件。 我們還需要澄清的另一點是元素可以拖放到哪裡。就像我們不能隨意拖動任何元素一樣，我們也不能隨意拖放到任何元素中。元素必須是有效的放置目標。 要使元素成為放置目標，您需要侦聽其 dragover 事件，並根據需要從該事件返回 false 或調用 preventDefault()： const element = document.querySelector('#my-drop-target') element.addEventListener('dragover', event => { event.preventDefault() }) 一旦完成了上述步驟，我們就擁有了一個可拖動元素和一个放置目標，就可以開始進一步操作了。我們可以與可拖動元素交互的事件有： dragstart drag dragend 放置目標上可以交互的事件有： dragenter dragover dragleave drop 拖放操作概述及觸發的事件 當用戶開始拖動一個可拖動元素時，可以進行鼠標點擊並移動鼠標，或者也可以單擊並保持選擇，然後移動選擇區，此時會在元素上觸發 dragstart 事件： element.addEventListener('dragstart', event => { //... }) 傳遞給事件處理函數的 event 對象是一個 DragEvent 對象。它是從更一般的事件對象中擴展出來的，與所有其他事件（鼠標，鍵盤，滾動等）共享。...