HTML5 拖放（Drag 和 Drop）功能開發——淺談dataTransfer對象

[前言] 以前我已經爲你們介紹過一篇有關HTML5中原生拖拽的相關知識了。今天爲你們介紹HTML5拖拽中的其餘一些關於dataTransfer對象的知識和應用。

dataTransfer對象

以前的一篇文章中也有說起到dataTransfer對象，那會只是想經過dataTransfer對象來將被拖拽元素的id進行傳遞，使得目標元素能夠經過相應的dataTransfer對象來獲取id進行對應操做。

 

成員表

屬性	描述
dropEffect	設置或獲取拖曳操做的類型和要顯示的光標類型。
effectAllowed	設置或獲取數據傳送操做可應用於該對象的源元素。

 

方法	描述
clearData(sFormat)	經過 dataTransfer 對象從剪貼板刪除一種或多種數據格式。
getData(sFormat)	經過 dataTransfer 對象從剪貼板獲取指定格式的數據。
setData(sFormat,sData)	以指定格式給 dataTransfer 對象賦予數據。 sFormat: URL, Text
setDragImge(element, x, y)	element:指定一個對象，當拖動發生的時候，顯示在光標下方。x:x軸偏移量。y:y軸偏移量。

---

屬性

這個兩個屬性對於初次接觸DnD的朋友來講，可謂最使人摸不着頭腦的，網上和各書籍上對這兩個屬性的解釋均不全面，下面我試圖儘可能把它們講明白。

effectAllowed 和 dropEffect 最主要的做用是，用於配置拖拽操做過程當中鼠標指針的類型以便提示用戶後續可執行怎樣的操做；其次的做用是，控制 drop 事件的觸發與否。

 

---

dropEffect

做用：用於設置目標元素將執行的操做，若屬性值屬於 effectAllowed 範圍內，則鼠標指針將顯示對應的指針樣式，不然則顯示禁止的指針樣式。

  　　 取值範圍：

            copy ：被拖拽元素將被複制到目標元素內，若屬於 effectAllowed 範圍內時，則鼠標指針顯示覆制的樣式，不然則顯示禁止的指針樣式。

 　　　　link ：被拖拽元素將以超連接的形式打開資源，若屬於 effectAllowed  範圍內時，則鼠標指針顯示超連接的樣式，不然則顯示禁止的指針樣式。

            move ：被拖拽元素將被移動到目標元素內，若屬於 effectAllowed   範圍內時，則鼠標指針顯示移動的樣式，不然則顯示禁止的指針樣式。

            none ：被拖拽元素不能在目標元素上做任何操做，一直顯示禁止的指針樣式。除了文本框外其餘元素的默認值均爲none

注意：　　　

　　1. 僅能在 dragover 事件中設置該屬性值，其餘事件中設置均無效

　　2. 當顯示禁止的指針樣式時，將沒法觸發目標元素的 drop 事件。

---

 

effectAllowed

做用：用於設置被拖拽元素可執行的操做。

        取值範圍：

    　　 copy ，限定dropEffect的屬性值爲copy，不然會鼠標指針爲禁止樣式

　   　  link ，限定dropEffect的屬性值爲link，不然會鼠標指針爲禁止樣式

           move ，限定dropEffect的屬性值爲move，不然會鼠標指針爲禁止樣式

           copyLink ，限定dropEffect的屬性值爲copy和link，不然會鼠標指針爲禁止樣式

           copyMove ，限定dropEffect的屬性值爲copy和move，不然會鼠標指針爲禁止樣式

           linkMove ，限定dropEffect的屬性值爲link和move，不然會鼠標指針爲禁止樣式

　　     all ，容許dropEffect的屬性值爲任意值

           none ，鼠標指針一直爲禁止樣式，無論dropEffect的屬性值是什麼

           uninitialized ，沒有限定dropEffect屬性的值，效果和 all 同樣。

 注意：僅能在 dragstart 事件中設置該屬性，其餘事件中設置均無效。

---

 

小結

目前只先寫羅列了新的屬性，後續補坑。