拖放事件
拖动某元素时，将依次触发下列事件（被拖动元素）：
- dragstart
按下鼠标并开始移动鼠标时在被拖动元素身上触发。 - drag
继dragstrat触发后，继续拖动会持续触发drag事件 - dragend
当拖动停止时，会触发dragend事件
当某个元素被拖动到了一个有效的放置目标上时，下列事件会依次发生（放置目标）：
- dragenter
只要有元素被拖动到放置目标上，就会触发dragenter事件 - dragover
继dragenter后，在被拖动的元素还在放置目标的范围内移动，就会持续触发该事件 - dragleave或drop
如果元素被拖出了放置目标，触发dragleave事件，如果元素被放到了放置目标中，会触发drop事件而不是dragleave事件。
自定义放置目标
在拖动元素经过某些无效放置目标时，可以看到有特殊的光标（圆环带斜线）来提示用户不能把元素放置在该目标上面，这些放置目标默认是不允许放置的，不管用户如何操作，都不会发生drop事件。
把元素变成有效的放置目标的方法：
重写dragenter和drogover事件的默认行为
EventUtil.addHandler(droptarget,"dragover",function(event){
EventUtil.preventDefalut(event);
})
...
以上代码执行后，光标变成了允许放置的符号。释放鼠标也会触发drop事件。
由于在Firfox浏览器中，放置事件的默认行为是打开被放到放置目标的URL
因此还要取消drop事件的默认行为，阻止它打开URL
dataTransfer对象
dataTransfer是事件对象的一个属性，用于从被拖动元素向放置目标传递字符串格式的数据
- setData()
接收两个参数，参数一是一个字符串，表示保存的数据类型，可设置为"text"或"URL"
参数二为该类型的值 - getData()
接收一个表示保存的数据类型的参数，返回传入setData()第二个参数的值
注意： 保存在dataTransfer对象中的数据只能在drop事件处理程序中读取，否则dataTransfer被销毁，数据也就丢失了。
浏览器的默认处理
在拖动文本框的文本时，浏览器会调用setData()方法，将拖动的文本以“text”格式保存在dataTransfer对象中，在拖动链接或图像时，会调用setData()保存URL，然后被拖动到放置目标是，就可以通过getData()读取这些数据。
我们也可以在dragStart事件处理程序中调用setData()，手工保存自己要传输的数据，以便将来使用。
dropEffect与effectAllowed
dropEffect属性可以知道被拖动的元素能够执行哪种放置行为（改变光标的样式），有四个可能的值
- "none"
不能把拖动的元素放在这里，这是除文本框之外所有元素的默认值 - "move"
应该把拖动的元素移动到放置目标 - "copy"
应该把拖动的元素复制到放置目标 - "link:
表示放置目标会打开拖动的元素。
effectAllowed属性表示允许拖动元素的哪种dropEffect
- "uninitiallized"
没有给被拖动的元素设置任何放置行为 - "none"
被拖动的元素不能有任何行为 - "copy"
- "link"
- "move"
- "copyLink"
- "copyMove"
- "linkMove"
- "all"
允许任意dropEffect。
可拖动
默认情况下，图像、链接和文本是可以拖动的，让其他元素可以拖动的方法是设置元素的draggable属性为true
其他成员（兼容性较差）
HTML5规范规定dataTransfer还有以下方法和属性
- addElement(element)
- clearData(format)
- setDragImage(element,x,y)
- types
网友评论