js --拖拽

拖拽即通過鼠標(biāo)按下，將要拖拽的目標(biāo)放置到某一個(gè)位置。

一般拖拽編寫的步驟:

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

2.重寫放置目標(biāo)元素的默認(rèn)行為

3.編寫事件

拖放事件

dragstart     鼠標(biāo)按住拖放目標(biāo)時(shí)

drag             開始移動(dòng)時(shí)

dragend        拖放結(jié)束(鼠標(biāo)抬起)

放置事件

        dragenter    進(jìn)入放置目標(biāo)
        dragover     在放置目標(biāo)內(nèi)移動(dòng)
        drop           放置(即鼠標(biāo)抬起)

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

數(shù)據(jù)傳輸對(duì)象

dataTransfer對(duì)象 它是拖動(dòng)事件對(duì)象的一個(gè)屬性，用于從被拖動(dòng)元素向放置目標(biāo)傳遞字符串格式的數(shù)據(jù)。

屬性dropEffect

"none":不能把拖動(dòng)的元素放到這里。默認(rèn)值

"move"：應(yīng)該把拖放的元素移動(dòng)到放置目標(biāo)

"copy"：應(yīng)該把拖動(dòng)的元素復(fù)制到放置目標(biāo)

"link"：表示放置目標(biāo)會(huì)打開拖動(dòng)的元素

effectAllowed

只能在dragStart事件中設(shè)置，該屬性可以設(shè)置鼠標(biāo)的樣式

取值

"uninitialized"：沒有給被拖動(dòng)的元素設(shè)置任何放置行為。

"none"：被拖動(dòng)的元素不能有任何行為。

"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()保存的值

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

setData(type,value)

參數(shù):type 存儲(chǔ)的數(shù)據(jù)類型,value為要保存到值

完整示例樣式與html

本文版權(quán)歸黑馬程序員JavaEE學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！

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