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

其實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('source');var target = document.getElementById('target');

拖曳元素

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

• dragstart

• drag

• dragend

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

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

#目標元素

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

• dragenter

• dragover

• #dragleave

---

## drop



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

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

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

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

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

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

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

就可以解決問題

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

資料交換

---

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

我們需要進行資料交換

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

dataTransfer

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

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

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

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

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

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

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

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

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

• 拖曳設定

在dataTransfer中還有兩個重要的屬性

• dropEffect

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

• link 目標開啟拖曳元素（拖曳元素必須是連結並有URL）

effectAllowed

effectAllowed屬性值也是字符串，表示允許拖曳元素哪一種dropEffect
要使用這個屬性，必須在dragst事件處理函數中設定

• uninitialized 沒有設定任何拖曳行為

• none 不能由任何行為

• copy 僅允許dropEffect值為copy

• link 僅允許dropEffect值為link

• move 僅允許dropEffect值為move

• #copyLink 允許dropEffect值為copy和link

########## #copyMove 允許dropEffect值為copy和move#############linkMove 允許dropEffect值為link和move############all 允許任意dropEffect##### ####

以上是HTML5元素拖曳drag與拖放drop相關API的具體介紹（圖文）的詳細內容。更多資訊請關注PHP中文網其他相關文章！