當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5拖放API

發布時間：2024/5/7 HTML 66 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5拖放API 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1、開啟拖放

將將要拖放的對象元素的draggable屬性設置為true，任何元素均可實現拖放，但img與a元算（必須制定href）默認允許拖放。

2、與拖放相關的事件

事件	產生事件的元素	描述
dragstart	被拖放的元素	開始拖放操作
drag	被拖放的元素	拖放過程中
dragenter	拖放過程中鼠標經過的元素	被拖放的元素開始進入本元素的范圍內
dragover	拖放過程中鼠標經過的元素	被拖放的元素正在本元素的范圍內移動
dragleave	拖放過程中鼠標經過的元素	被拖放的元素離開本元素的范圍
drop	拖放的目標元素	有其他元素被拖放到本元素中
dragend	拖放的對象元素	拖放操作結束

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title></title><script>function init() {const source = document.getElementById('dragme');const dest = document.getElementById("text");//拖動開始source.addEventListener("dragstart", function (ev) {//向dataTransfer對象添加數據const dt = ev.dataTransfer;dt.effectAllowed = "all";//拖動元素為dt.setData("text/plain",this.id);dt.setData("text/plain", "您好");}, false);//拖放結束dest.addEventListener("dragend", function (ev) {//不執行默認處理(拒絕被拖放)ev.preventDefault();}, false);//drop：被拖放dest.addEventListener("drop", function (ev) {//從DataTransfer對象那里取得數據const dt = ev.dataTransfer;const text = dt.getData("text/plain");dest.textContent += text;//不執行默認處理（拒絕被拖放）ev.preventDefault();ev.stopPropagation();}, false);}//設置頁面屬性，不執行默認處理(拒絕被拖放)document.ondragover = function (e) {e.preventDefault();}document.ondrop = function (e) {e.preventDefault();}</script> </head> <body onload="init();"> <div id="dragme" draggable="true" style="width: 200px;border: 1px solid gray;">請拖放 </div> <div id="text" style="width: 200px;height: 200px;border: 1px solid gray;"> </div> </body> </html>

針對拖放的目標元素，必須在dragend或dragover事件內調用“事件對象.preventDefault()”方法。因為默認情況下，拖放的目標元素是不允許接受元素的，為了把元素拖放到其中，必須關閉默認處理。

要實現拖放過程，還必須在目標元素的drop事件中關閉默認處理(拒絕被拖放)，否則拖放處理也不能實現。因為頁面實現與其他元素接受拖放的，如果頁面上拒絕拖放，那么頁面上其他元素就不能接受拖放了。

要實現拖放過程，還必須設定整個頁面為不執行默認處理(拒絕被拖放)，否則被拖放處理也不能實現。因為頁面是先于其他元素接受拖放的，如果頁面上拒絕拖放，那么頁面上其他元素不能接受拖放了。

為了讓拖放在所有支持拖放API的瀏覽器中都能正常運行，需要制定"-webkit-user-drag:element"這種Webkit特有的CSS屬性。

3、MIME類型

·text/plain：文本文字 ·text/html：HTML文字 ·text/xml：XML文字 ·text/uri-list：URL列表，每個URL為一行

4、js的dataTransfer對象

提供對于預定義的剪貼板格式的訪問,以便在拖拽中使用。

屬性	描述	參數
dropEffect	設置或返回拖放目標上允許發生的拖放行為和要顯示的光標類型	copy 復制樣式被顯示 link? 鏈接樣式被顯示 move? 移動樣式被顯示 none? 默認,沒有鼠標樣式被定義
effectAllowed	設置或返回被拖動元素允許發生的拖動行為與該對象的源元素。	copy 選項被復制 link? 選項被dataTransfer作為link方式保存 move? 當放置時,對象被移動至目標對象 copylink? 選項是被復制還是被作為link方式保存關鍵在于目標對象 linkmove 選項是被作為link方式保存還是被移動關鍵在于目標對象 all 所有效果都被支持 none 不支持任何效果 uninitialized 默認不能通過這個屬性傳遞任何值
types	存入數據的種類，字符串的偽數組	?
clearData()	清除DataTransfer對象中存放的數據，如果省略參數format，則清楚全部數據	?
setData(format,data)	將指定格式的數據賦值給dataTransfer對象	參數format定義數據的格式也就是數據的類型，data為待賦值的數據
getData(format,data)	從dataTransfer對象中獲取指定格式的數據	format代表數據格式，data為數據。
setDragImage(Element image，long x,long y)	用img元素來設置拖放圖標(部分瀏覽器中可以用canvas等其他元素來設置)	element設置自定義圖標，x設置圖標與鼠標在水平方向上的距離，y設置圖標與鼠標在垂直方向上的距離。

effectAllowed定義了在源對象上的操作,可定義在ondragstart事件中。

dropEffect定義了在目標對象上的操作,可定義在ondrop,ondragenter,ondragover事件中。

effectAllowed可以定義all操作,但是dropEffect可以定義copy操作。

5、設定拖放時的視覺效果

DataTransfer對象的dropEffect屬性表示實際拖放時的視覺效果，一般在ondragover事件中指定，允許設定的值為none、link、move。dropEffect屬性所表示的實際視覺效果必須與effectAllowed屬性值所表示的允許操作相匹配，規則如下所示：

如果effectAllowed屬性設定為none，則不允許拖放元素。
如果dropEffect屬性設定為none，則不允許拖放元素。
如果effectAllowed屬性設定為all或不設定，則dropEffect屬性允許被設定為任何值。
如果effectAllowed屬性設定為具體操作，而dropEffect屬性也設定了具體視覺效果，則dropEffect屬性值必須與effectAllowed屬性值相匹配，否則不允許將被拖放元素拖放到目標元素中。

6、自定義拖放圖標

setDragImage(Element image，long x,long y)，第一個參數image是設定拖放圖標的圖標元素，第二個參數x為拖放圖標離鼠標指針的X軸方向的唯一量，第三個參數y為拖放圖標離鼠標指針的y軸方向的位移量。

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script>function init(){var dragIcon = document.createElement("img");dragIcon.src ='https://www.baidu.com/img/bdlogo.png';var source = document.getElementById('dragme');var dest = document.getElementById("text");source.addEventListener('dragstart',function(ev){var dt = ev.dataTransfer;dt.setDragImage(dragIcon,-10,-10);dt.effectAllowed = "copy";dt.setData("text/plain","您好");},false);dest.addEventListener('dragend',function(ev){ev.preventDefault();},false);dest.addEventListener('dragover',function(){var dt = ev.dataTransfer;dt.dropEffect = "copy";ev.preventDefault();},false);dest.addEventListener('drop',function(ev){var dt = ev.dataTransfer;var text = dt.getData("text/plain");dest.textContent +=text;ev.preventDefault();ev.stopPropagation();},false);}document.ondragover = function(e){e.preventDefault();};document.ondrop = function(e){e.preventDefault();}</script></head><body onload="init();"><div id="dragme" draggable="true" style="width: 200px;border: 1px solid gray;">請拖放</div><div id="text" style="width: 200px;height: 200px;border: 1px solid gray;"></div></body> </html>