首頁技術文章正文

js --拖拽

更新時間:2018-09-18 來源:黑馬程序員技術社區(qū) 瀏覽量:

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

一般拖拽編寫的步驟:

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
1553763226229_1.png1553763238763_2.png
1553763251256_3.png

1553763279810_4.png1553763285098_5.png

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

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

分享到:
在線咨詢 我要報名
和我們在線交談!