柚子快報(bào)邀請(qǐng)碼778899分享：前端 【Html5拖放詳解】

http://yzkb.51969.com/

文章目錄

前言一、拖放是什么？二、使用步驟1.設(shè)置元素為可拖放2.被拖放對(duì)象的事件3.進(jìn)入目標(biāo)投放區(qū)的事件4.傳遞拖拽數(shù)據(jù)

三、注意：阻止默認(rèn)行為四、實(shí)例五、dataTransfer 對(duì)象的屬性總結(jié)

前言

拖放是常見(jiàn)是一個(gè)常見(jiàn)操作，在Html5中任何元素都可以被拖放。

提示：以下是關(guān)于Html5中拖放的一些知識(shí)點(diǎn)，下面案例可供參考

一、拖放是什么？

拖放可以分拖拽（Drag）和放開（Drop）。拖拽就是按下左鍵移動(dòng)鼠標(biāo)到指定位置，放開就是放開鼠標(biāo)左鍵，放下對(duì)象

二、使用步驟

1.設(shè)置元素為可拖放

true:可以被拖放false:不可以被拖放auto:瀏覽器自己判斷是否可以被拖放

代碼如下（示例）：

2.被拖放對(duì)象的事件

ondragstart——開始拖放ondrag——拖放過(guò)程中ondragend——結(jié)束拖放時(shí)

3.進(jìn)入目標(biāo)投放區(qū)的事件

ondragenter——被拖放元素鼠標(biāo)進(jìn)入時(shí)ondragover——被拖放元素鼠標(biāo)進(jìn)入了ondragleave——被拖放元素鼠標(biāo)離開了ondrop——被拖放元素放下了

4.傳遞拖拽數(shù)據(jù)

dataTransfer對(duì)象可以在拖拽元素和投放區(qū)進(jìn)行數(shù)據(jù)共享

setData(鍵名,鍵值)getData(鍵名) 代碼如下（示例）：

text.ondragstart=function(e){

e.dataTransfer.setData('content',text.innerHTML)

}

box.ondrop=function(e){

var con= e.dataTransfer.getData('content')

box.innerHTML=con

}

補(bǔ)充 - clearData(鍵名) 刪除數(shù)據(jù)

pret = object.cleardata([sdataformat]) 參數(shù)sdataformat是指定要?jiǎng)h除的數(shù)據(jù)格式的字符串，可以是下面的值。

Text：刪除文本格式數(shù)據(jù)。 URL：刪除URL格式數(shù)據(jù)。 File：刪除文件格式數(shù)據(jù)。 HTML：刪除HTML格式數(shù)據(jù)。 Image：刪除圖像格式數(shù)據(jù)。

如果不指定參數(shù)sdataformat，則清空dataTransfer對(duì)象中的所有數(shù)據(jù)。

三、注意：阻止默認(rèn)行為

一定要在ondragover中阻止一些放置區(qū)域的默認(rèn)行為，因?yàn)槟J(rèn)行為中不允許放置其他元素

box.ondragover=function(e){

e.preventDefault()

}

四、實(shí)例

拖放前

拖放后

五、dataTransfer 對(duì)象的屬性

（1）dropEffect dropEffect 屬性用于獲取和設(shè)置拖放操作的類型以及光標(biāo)的類型（形狀）。

dropEffect 屬性的可能取值

copy 顯示copy光標(biāo)link 顯示link光標(biāo)move 顯示move光標(biāo)none 默認(rèn)值，即沒(méi)有指定光標(biāo)

（2）effectAllowed effectAllowed屬性用于獲取和設(shè)置對(duì)被拖放的源對(duì)象允許執(zhí)行何種數(shù)據(jù)傳輸操作。

effectAllowed 屬性的可能取值

copy 允許執(zhí)行復(fù)制操作link 將源對(duì)象鏈接到目的地move 將源對(duì)象移動(dòng)到目的地copyLink 可以是copy或link，取決于目標(biāo)對(duì)象的默認(rèn)值copyMove 可以是copy或move，取決于目標(biāo)對(duì)象的默認(rèn)值linkMove 可以是link或move，取決于目標(biāo)對(duì)象的默認(rèn)值all 允許所有數(shù)據(jù)傳輸操作none 沒(méi)有數(shù)據(jù)傳輸操作，即放開時(shí)不執(zhí)行任何操作uninitialized 表明沒(méi)有為effectAllowed屬性設(shè)置值，執(zhí)行默認(rèn)的拖放操作，為默認(rèn)值

————————————————

版權(quán)聲明：本文為博主原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接和本聲明。

原文鏈接：https://blog.csdn.net/qq_36823300/article/details/100936517

總結(jié)

以上就是今天要講的內(nèi)容，本文簡(jiǎn)單介紹了拖放，希望可以有幫助。

柚子快報(bào)邀請(qǐng)碼778899分享：前端 【Html5拖放詳解】

http://yzkb.51969.com/

相關(guān)文章