摘要：拖放一為了使元素可拖動，把屬性設置為二添加事件監聽拖放有如下事件事件拖拉過程中，在被拖拉的節點上持續觸發。在視覺上顯示拖拉進入當前節點，也是在這個事件的監聽函數中設置。該事件的監聽函數負責取出拖拉數據，并進行相關處理。

DragEvent

HTML5拖放有如下事件

drag事件：拖拉過程中，在被拖拉的節點上持續觸發。
dragstart事件：拖拉開始時在被拖拉的節點上觸發，該事件的target屬性是被拖拉的節點。通常應該在這個事件的監聽函數中，指定拖拉的數據。
dragend事件：拖拉結束時（釋放鼠標鍵或按下escape鍵）在被拖拉的節點上觸發，該事件的target屬性是被拖拉的節點。它與dragStart事件，在同一個節點上觸發。不管拖拉是否跨窗口，或者中途被取消，dragend事件總是會觸發的。
dragenter事件：拖拉進入當前節點時，在當前節點上觸發，該事件的target屬性是當前節點。通常應該在這個事件的監聽函數中，指定是否允許在當前節點放下（drop）拖拉的數據。如果當前節點沒有該事件的監聽函數，或者監聽函數不執行任何操作，就意味著不允許在當前節點放下數據。在視覺上顯示拖拉進入當前節點，也是在這個事件的監聽函數中設置。
dragover事件：拖拉到當前節點上方時，在當前節點上持續觸發，該事件的target屬性是當前節點。該事件與dragenter事件基本類似，默認會重置當前的拖拉事件的效果（DataTransfer對象的dropEffect屬性）為none，即不允許放下被拖拉的節點，所以如果允許在當前節點drop數據，通常會使用preventDefault方法，取消重置拖拉效果為none。
dragleave事件：拖拉離開當前節點范圍時，在當前節點上觸發，該事件的target屬性是當前節點。在視覺上顯示拖拉離開當前節點，就在這個事件的監聽函數中設置。
drop事件：被拖拉的節點或選中的文本，釋放到目標節點時，在目標節點上觸發。注意，如果當前節點不允許drop，即使在該節點上方松開鼠標鍵，也不會觸發該事件。如果用戶按下Escape鍵，取消這個操作，也不會觸發該事件。該事件的監聽函數負責取出拖拉數據，并進行相關處理。

當一個節點被拖拉到另一個節點里，觸發的事件如下:

dragstart --> drag --> dragenter --> dragover --> drop --> dragend

dragstart， drag， dragend 在被拖動的節點觸發，觸發的event.target為被拖拽的節點

dragenter dragover dragleave drop 在目標節點觸發，觸發的event.target為釋放的目標節點

在 dragover觸發時需要執行event.preventDefault()，允許被拖動的節點進入。

在firefox瀏覽器上需要注意的東西

1、在firefox上 drag、dragend 事件不能夠獲取鼠標位置
2、需要在dragstart 觸發時保存數據，不然不能拖動。
3、dataTransfer.setData()函數中 key 為‘Text’ 時會打開一個新的標簽頁

let drag = document.getElementById("drag");
    drag.addEventListener("dragstart", (event) => {
        console.log("dragstart")
        // 兼容 firefox ， setData()函數中 key 為‘Text’ 時會打開一個新的標簽頁
        // event.dataTransfer.setData("Text","www.baidu.com");
        event.dataTransfer.setData("any","www.baidu.com");
    })

學習了各個事件后做了一個可以拖動的Div的demo，點擊查看