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 事件中设置该属性，其他事件中设置均无效。

---

 

小结

目前只先写罗列了新的属性，后续补坑。