js --拖拽

拖拽即通過鼠標按下，將要拖拽的目標放置到某一個位置。

一般拖拽編寫的步驟:

1.將要拖放的元素設置為可拖放的，即，將draggable設置為true.

2.重寫放置目標元素的默認行為

3.編寫事件

拖放事件

dragstart     鼠標按住拖放目標時

drag             開始移動時

dragend        拖放結束(鼠標抬起)

放置事件

        dragenter    進入放置目標
        dragover     在放置目標內移動
        drop           放置(即鼠標抬起)

***：事件觸發(fā)順序 dragstart - -> drag - -> dragenter -->dragover -->drop -->dragend

數據傳輸對象

dataTransfer對象 它是拖動事件對象的一個屬性，用于從被拖動元素向放置目標傳遞字符串格式的數據。

屬性dropEffect

"none":不能把拖動的元素放到這里。默認值

"move"：應該把拖放的元素移動到放置目標

"copy"：應該把拖動的元素復制到放置目標

"link"：表示放置目標會打開拖動的元素

effectAllowed

只能在dragStart事件中設置，該屬性可以設置鼠標的樣式

取值

"uninitialized"：沒有給被拖動的元素設置任何放置行為。

"none"：被拖動的元素不能有任何行為。

"copy"：只允許值為"copy"的 dropEffect。

"link"：只允許值為"link"的 dropEffect。

"move"：只允許值為"move"的 dropEffect。

"copyLink"：允許值為"copy"和"link"的 dropEffect。

"copyMove"：允許值為"copy"和"move"的 dropEffect。

"linkMove"：允許值為"link"和"move"的 dropEffect。 ? "all"：允許任意 dropEffect。

方法getData(type)

取出setData()保存的值

參數:一個字符串保存的數據類型。取值為‘text’、‘URL’、‘text/plain’、‘text/uri-list’

setData(type,value)

參數:type 存儲的數據類型,value為要保存到值

完整示例樣式與html

本文版權歸黑馬程序員JavaEE學院所有，歡迎轉載，轉載請注明作者出處。謝謝！

作者：黑馬程序員前端與移動開發(fā)培訓學院
首發(fā)：http://web.itheima.com/?v2