HTML5元素拖曳drag與拖放drop相關API的具體介紹（圖文）

黄舟

發布： 2017-03-11 15:58:27

原創

1797 人瀏覽過

其實HTML5就是新增一些有用的API
讓我們更輕鬆的開發
從而把更多精力都放在業務邏輯上來
這些API的使用也非常簡單
不過我的記性不太好
所以還是以部落格的形式記錄下來（手動滑稽）
今天就來寫一下這個拖曳API

預設拖曳

說起拖放，其實最早實現拖曳功能的還是IE（IE4）
H5就是在IE實例的基礎上指定的拖曳規範
在瀏覽器中，是有預設拖曳的
比如說圖片的拖曳

選取文字的拖曳

連結的拖曳

#元素拖曳

瀏覽器預設允許我們拖曳圖像、文字以及連結
讓其它元素被拖曳也是可以實現的
只需要在元素標籤上新增一個屬性

<p draggable="true"></p>

登入後複製

當拖曳這個元素的時候，瀏覽器就會以半透明複本的方式顯示

拖曳事件

拖曳事件應該分為兩類
一類是被拖曳元素觸發的事件
另一類是拖曳目標元素觸發的事件

<p id="source" draggable="true"></p><p id="target"></p>  <!-- 样式略 -->

登入後複製

var source = document.getElementById(&#39;source&#39;);var target = document.getElementById(&#39;target&#39;);

登入後複製

拖曳元素

#拖曳元素的時候，被拖曳元素會觸發以下事件

dragstart
drag
dragend

當滑鼠點中元素並且開始移動時，就會觸發dragstart事件（類比mousedown）
拖曳過程中會持續不斷地觸發drag事件（類比mousemove）
放開滑鼠取消拖曳時就會觸發dragend事件（類比mouseup）

source.ondragstart = function(){
  console.log(&#39;开始拖拽&#39;);
}source.ondrag = function(){
  console.log(&#39;拖拽中&#39;);
}source.ondragend = function(){
  console.log(&#39;拖拽结束&#39;);
}

登入後複製

#目標元素

當拖曳的元素拖曳到一個目標元素上時，目標元素會觸發下列事件

dragenter
dragover
#dragleave

## drop

拖曳元素到目標上，就會觸發dragenter事件（類比mouseover） 當拖曳元素在目標元素中，就會持續觸發dragover事件

離開目標元素，觸發dragleave事件（類比mouseout）

若拖放元素到了目標元素中（在目標元素中放開滑鼠），就會觸發drop事件而不會觸發dragleave事件

target.ondragenter = function(){
  console.log(&#39;拖动进入目标元素&#39;);
}target.ondragover = function(){
  console.log(&#39;目标元素中拖拽&#39;);
}target.ondragleave = function(){
  console.log(&#39;拖动离开目标元素&#39;);
}target.ondrop = function(){
  console.log(&#39;拖放&#39;);
}

登入後複製

這時我們會發現元素拖曳到目標元素中時
並沒有觸發drop事件

我們看到了一個特殊的遊標（圓環+反斜線）

意思就是無效的拖放
所以導致沒有觸發drop事件
也就是說元素預設是不能夠拖放
只要我們在
目標元素的dragover事件中取消預設事件

就可以解決問題

target.ondragover = function(e){
  console.log(&#39;目标元素中拖拽&#39;);
  e.preventDefault(); //增}

登入後複製

資料交換

#只是簡單的拖放毫無意義

我們需要進行資料交換

而這個用語資料交換的物件就是事件物件的屬性

dataTransfer

dataTransfer的兩個核心方法是setData()和getData()

setData()用於設定數據，getData()用語接收資料

event.dataTransfer.setData(&#39;text&#39;,&#39;some text&#39;);
var text = event.dataTransfer.getData(&#39;text&#39;);//保存在dataTransfer中的数据只能在drop事件处理函数中处理

登入後複製

如果我們拖曳了選取文字
那麼瀏覽器預設就會呼叫dataTransfer.setData，設定對應文字資料setData()和getData()就是資料類型的字串IE定義的資料類型除了「text」文字類型還有「URL」 H5對它進行了擴展，可以指定各種MIME類型

但為了向後相容，它同樣支援“text”和“URL”

它們會被分別映射為“text/plain”和“text/uri-list”

如果資料保存為URL，瀏覽器會做特殊處理，把它當成網頁連結
（所以拖曳連結到另外的瀏覽器視窗就會打開網頁）

必要的話，我們可以手動儲存需要傳輸的資料

var source = document.getElementById(&#39;source&#39;);var target = document.getElementById(&#39;target&#39;);
source.ondragstart = function(e){
  e.dataTransfer.setData('text','传递文本数据');
}
target.ondragover = function(e){
  e.preventDefault();
}
target.ondrop = function(e){
  console.log(e.dataTransfer.getData('text'));
}

登入後複製

拖曳設定
dropEffect
和###effectAllowed# ########dropEffect######dropEffect屬性值為字串，表示被拖曳元素可以執行哪一種放置行為###要使用這個屬性，必須在dragenter事件處理函數中設置############none 不能把元素拖放至此（除文字方塊外全部元素的預設值）############move 移動到目標#### ########copy 複製到目標###
link 目標開啟拖曳元素（拖曳元素必須是連結並有URL）