摘要：拖放一為了使元素可拖動(dòng)，把屬性設(shè)置為二添加事件監(jiān)聽拖放有如下事件事件拖拉過程中，在被拖拉的節(jié)點(diǎn)上持續(xù)觸發(fā)。在視覺上顯示拖拉進(jìn)入當(dāng)前節(jié)點(diǎn)，也是在這個(gè)事件的監(jiān)聽函數(shù)中設(shè)置。該事件的監(jiān)聽函數(shù)負(fù)責(zé)取出拖拉數(shù)據(jù)，并進(jìn)行相關(guān)處理。

DragEvent

HTML5拖放有如下事件

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

當(dāng)一個(gè)節(jié)點(diǎn)被拖拉到另一個(gè)節(jié)點(diǎn)里，觸發(fā)的事件如下:

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

dragstart， drag， dragend 在被拖動(dòng)的節(jié)點(diǎn)觸發(fā)，觸發(fā)的event.target為被拖拽的節(jié)點(diǎn)

dragenter dragover dragleave drop 在目標(biāo)節(jié)點(diǎn)觸發(fā)，觸發(fā)的event.target為釋放的目標(biāo)節(jié)點(diǎn)

在 dragover觸發(fā)時(shí)需要執(zhí)行event.preventDefault()，允許被拖動(dòng)的節(jié)點(diǎn)進(jìn)入。

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

1、在firefox上 drag、dragend 事件不能夠獲取鼠標(biāo)位置
2、需要在dragstart 觸發(fā)時(shí)保存數(shù)據(jù)，不然不能拖動(dòng)。
3、dataTransfer.setData()函數(shù)中 key 為‘Text’ 時(shí)會(huì)打開一個(gè)新的標(biāo)簽頁(yè)

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

學(xué)習(xí)了各個(gè)事件后做了一個(gè)可以拖動(dòng)的Div的demo，點(diǎn)擊查看