當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

HTML5拖放API

發(fā)布時(shí)間：2024/5/7 HTML 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5拖放API 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1、開(kāi)啟拖放

將將要拖放的對(duì)象元素的draggable屬性設(shè)置為true，任何元素均可實(shí)現(xiàn)拖放，但img與a元算（必須制定href）默認(rèn)允許拖放。

2、與拖放相關(guān)的事件

事件	產(chǎn)生事件的元素	描述
dragstart	被拖放的元素	開(kāi)始拖放操作
drag	被拖放的元素	拖放過(guò)程中
dragenter	拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素	被拖放的元素開(kāi)始進(jìn)入本元素的范圍內(nèi)
dragover	拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素	被拖放的元素正在本元素的范圍內(nèi)移動(dòng)
dragleave	拖放過(guò)程中鼠標(biāo)經(jīng)過(guò)的元素	被拖放的元素離開(kāi)本元素的范圍
drop	拖放的目標(biāo)元素	有其他元素被拖放到本元素中
dragend	拖放的對(duì)象元素	拖放操作結(jié)束

<!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");//拖動(dòng)開(kāi)始source.addEventListener("dragstart", function (ev) {//向dataTransfer對(duì)象添加數(shù)據(jù)const dt = ev.dataTransfer;dt.effectAllowed = "all";//拖動(dòng)元素為dt.setData("text/plain",this.id);dt.setData("text/plain", "您好");}, false);//拖放結(jié)束dest.addEventListener("dragend", function (ev) {//不執(zhí)行默認(rèn)處理(拒絕被拖放)ev.preventDefault();}, false);//drop：被拖放dest.addEventListener("drop", function (ev) {//從DataTransfer對(duì)象那里取得數(shù)據(jù)const dt = ev.dataTransfer;const text = dt.getData("text/plain");dest.textContent += text;//不執(zhí)行默認(rèn)處理（拒絕被拖放）ev.preventDefault();ev.stopPropagation();}, false);}//設(shè)置頁(yè)面屬性，不執(zhí)行默認(rèn)處理(拒絕被拖放)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;">請(qǐng)拖放 </div> <div id="text" style="width: 200px;height: 200px;border: 1px solid gray;"> </div> </body> </html>

針對(duì)拖放的目標(biāo)元素，必須在dragend或dragover事件內(nèi)調(diào)用“事件對(duì)象.preventDefault()”方法。因?yàn)槟J(rèn)情況下，拖放的目標(biāo)元素是不允許接受元素的，為了把元素拖放到其中，必須關(guān)閉默認(rèn)處理。

要實(shí)現(xiàn)拖放過(guò)程，還必須在目標(biāo)元素的drop事件中關(guān)閉默認(rèn)處理(拒絕被拖放)，否則拖放處理也不能實(shí)現(xiàn)。因?yàn)轫?yè)面實(shí)現(xiàn)與其他元素接受拖放的，如果頁(yè)面上拒絕拖放，那么頁(yè)面上其他元素就不能接受拖放了。

要實(shí)現(xiàn)拖放過(guò)程，還必須設(shè)定整個(gè)頁(yè)面為不執(zhí)行默認(rèn)處理(拒絕被拖放)，否則被拖放處理也不能實(shí)現(xiàn)。因?yàn)轫?yè)面是先于其他元素接受拖放的，如果頁(yè)面上拒絕拖放，那么頁(yè)面上其他元素不能接受拖放了。

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

3、MIME類型

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

4、js的dataTransfer對(duì)象

提供對(duì)于預(yù)定義的剪貼板格式的訪問(wèn),以便在拖拽中使用。

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

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

dropEffect定義了在目標(biāo)對(duì)象上的操作,可定義在ondrop,ondragenter,ondragover事件中。

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

5、設(shè)定拖放時(shí)的視覺(jué)效果

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

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

6、自定義拖放圖標(biāo)

setDragImage(Element image，long x,long y)，第一個(gè)參數(shù)image是設(shè)定拖放圖標(biāo)的圖標(biāo)元素，第二個(gè)參數(shù)x為拖放圖標(biāo)離鼠標(biāo)指針的X軸方向的唯一量，第三個(gè)參數(shù)y為拖放圖標(biāo)離鼠標(biāo)指針的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;">請(qǐng)拖放</div><div id="text" style="width: 200px;height: 200px;border: 1px solid gray;"></div></body> </html>