柚子快報邀請碼778899分享：前端 【Html5拖放詳解】

http://yzkb.51969.com/

文章目錄

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

三、注意：阻止默認行為四、實例五、dataTransfer 對象的屬性總結

前言

拖放是常見是一個常見操作，在Html5中任何元素都可以被拖放。

提示：以下是關于Html5中拖放的一些知識點，下面案例可供參考

一、拖放是什么？

拖放可以分拖拽（Drag）和放開（Drop）。拖拽就是按下左鍵移動鼠標到指定位置，放開就是放開鼠標左鍵，放下對象

二、使用步驟

1.設置元素為可拖放

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

代碼如下（示例）：

2.被拖放對象的事件

ondragstart——開始拖放ondrag——拖放過程中ondragend——結束拖放時

3.進入目標投放區(qū)的事件

ondragenter——被拖放元素鼠標進入時ondragover——被拖放元素鼠標進入了ondragleave——被拖放元素鼠標離開了ondrop——被拖放元素放下了

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

dataTransfer對象可以在拖拽元素和投放區(qū)進行數(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

}

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

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

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

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

三、注意：阻止默認行為

一定要在ondragover中阻止一些放置區(qū)域的默認行為，因為默認行為中不允許放置其他元素

box.ondragover=function(e){

e.preventDefault()

}

四、實例

拖放前

拖放后

五、dataTransfer 對象的屬性

（1）dropEffect dropEffect 屬性用于獲取和設置拖放操作的類型以及光標的類型（形狀）。

dropEffect 屬性的可能取值

copy 顯示copy光標link 顯示link光標move 顯示move光標none 默認值，即沒有指定光標

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

effectAllowed 屬性的可能取值

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

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

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

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

總結

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

柚子快報邀請碼778899分享：前端 【Html5拖放詳解】

http://yzkb.51969.com/

相關文章