HTML5 拖放（Drag & Drop）

##一。設定屬性

draggable="true"

帶 href 屬性的 a 標籤和 img 標籤預設可以拖放，其它標籤需要設定這個屬性

##二。事件

drag : 元素被拖拽時由拖拽元素頻繁觸發的事件 (每隔幾百毫秒就會觸發一次)
dragstart : 拖拽時開始時由拖拽元素觸發的事件
dragend : 拖拽結束時觸發由拖拽元素的事件
dragover : 當拖拽元素進入放置區域時由放置元素頻繁觸發的事件 (每隔幾百毫秒就會觸發一次)
dragenter : 當拖拽元素進入放置區域時由放置元素觸發的事件
dragleave : 當拖拽元素離開放置區域時由放置元素觸發的事件
drop : 當拖拽元素在放置區域放置時由放置元素觸發的事件

注意：drag 和 dragover 是持續觸發的

拖放檔案到瀏覽器中時，需要在 dragover 和 drop 事件處理器中 preventDefault，因為從其他應用軟體或是檔案中拖東西進來，尤其是圖片的時候，預設的行為是瀏覽器將當前頁面重定向到被拖拽元素所指向的資源上，實測必須在 2 個事件處理器中都阻止預設行為

注意：觸發 dragstart 事件後，其他元素的 mousemove,mouseover,mouseenter,mouseleave,mouseout 事件均不會被觸發了

事件觸發次序：

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

事件物件：

DragEvent，繼承自 [object MouseEvent] 物件，其實就多了個 {DataTransfer} dataTransfer 屬性

事件物件的重要屬性：

effectAllowed 和 dropEffect 最主要的作用是，用於配置拖拽操作過程中滑鼠指標的型別以便提示使用者後續可執行怎樣的操作；其次的作用是，控制 drop 事件的觸發與否。當顯示禁止的指標樣式時，將無法觸發目標元素的 drop 事件。

注意：只能在 dragstart 中設定 effectAllowed，只能在 dragover 中設定

更多資訊請查看 HTML5 魔法堂：全面理解 Drag & Drop API

##三。相容性

findmebyip 上說 drag 是全瀏覽器相容的，但實際上，IE 雖然是最早實現 drag 的，但 [IE10-] 支援度很低，可以忽略不計（僅對 img 元素、a[href] 元素和 input[type=text]/textarea 元素中被選中的文字有效，且不用設定 draggable="true"，不支援檔案拖放）。

##四。傳遞資料

傳遞資料需要用到 event.dataTransfer 物件，該物件提供 setData(type, data);和 getData(type);方法存取資料。

然後在 dragstart 事件處理器中setData('text/plain', data)（IE10 只支援 text/plain），在 drop 事件處理器中 getData('text') 即可

注意：如果型別不存在會被追加到 data 列表末尾，如果已存在則會替換掉原有內容。所以，不考慮 IE10 的話，相當於 setData(key, value);

##五。檔案拖放

dropArea.ondragover = function(e) {
    e.preventDefault();
}
dropArea.ondrop = function(e) {
    e.preventDefault();
    
    var files = e.dataTransfer.files;
    if (files && files.length > 0) {
        // 輸出檔案資訊
        var str = '';
        for(var i = 0; i < files.length; i++) {
            var file = files[i];

            // 線上預覽圖片也需要先把圖片上傳到伺服器，因為無法獲取客戶端檔案 url

            // 上傳檔案直接 xhr 發送 file 物件即可
            // var formData = new FormData();
            // formData.append('myfile', file);
            // xhr.send(formData);
            console.log(file);
        }

        console.log('receive a file');
    }
}

檔案拖放上傳需要注意的點比較多，下一篇博文將詳細介紹幾種常見的實現方式

###參考資料

HTML5 魔法堂：全面理解 Drag & Drop API：非常全面
JS 魔法堂：IE5~9 的 Drag&Drop API：[IE10-] 支援的拖放
HTML5 drag & drop 拖拽與拖放簡介

評論

提交評論