HTML5 DragEvent學習+製做一個能夠拖動的DIV

HTML5 拖放

1、爲了使元素可拖動，把 draggable 屬性設置爲 true

<div draggable="true"></div>

2、添加事件監聽

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鍵，取消這個操做，也不會觸發該事件。該事件的監聽函數負責取出拖拉數據，並進行相關處理。

點擊這個連接查看HTML5各個拖放事件

總結

當一個節點被拖拉到另外一個節點裏，觸發的事件以下:

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

1. dragstart， drag， dragend 在被拖動的節點觸發，觸發的event.target爲被拖拽的節點
2. dragenter dragover dragleave drop 在目標節點觸發，觸發的event.target爲釋放的目標節點
3. 在 dragover觸發時須要執行event.preventDefault()，容許被拖動的節點進入。

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

一、在firefox上 drag、dragend 事件不可以獲取鼠標位置
二、須要在dragstart 觸發時保存數據，否則不能拖動。
三、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，點擊查看