原生拖放详解

最早在网页中引入JavaScript拖放功能的是IE浏览器，HTML5以IE的实例为基础制定了拖放规范，Firefox，Safari 3+和Chrom也根据HTML5规范实现了原生拖放功能。

拖放事件

1. 被拖动元素为目标的事件

事件	说明
dragstart	按下鼠标键并开始移动鼠标时，会在被拖放的元素上触发dragstart事件。
drag	触发dragstart事件后，随即会触发drag事件，在元素被拖动期间会持续触发该事件。
dragend	当拖动停止时，会触发dragend事件

2. 放置元素为目标的事件

事件	说明
dragenter	当元素被拖动到放置目标上时，就会触发dragenter事件。
dragover	触发dragenter事件后，随即会触发dragover事件，只要被拖动元素在放置目标范围内移动时就会持续触发该事件。
dragleave或	当元素被拖出了放置目标时，就会触发dragleave事件.
drop	如果元素被放置在了目标中，则会触发drop事件。

可拖动

默认情况下，图像，链接和文本是可以拖动的，文本需要在选中的情况下才可以拖动。
HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。图像和链接的draggable属性自动被设置成了true,而其他元素这个属性的默认值都是false。

//让这个图像不可以拖动
<img src="smile.gif" draggable="false" alt="Smiley face">

//让这个元素可以拖动
<div draggable="true"></div>

自定义放置目标

虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的。通过重写dragenter和dragover事件的默认行为，我们可以把任何元素变成有效的放置目标。

var droptarget = document.getElementById("droptarget");

EventUtil.addHandler(droptarget, "dragover", function(event) {
	EventUtil.preventDefault(event);
})
EventUtil.addHandler(droptarget, "dragenter", function(event) {
	EventUtil.preventDefault(event);
})

dataTransfer对象

只是简单的拖放而没有数据变化是没有什么用的。dataTransfer是事件对象的一个属性，只能在拖放事件的事件处理程序中访问它，该对象用于从被拖动元素向放置目标传递字符串格式数据。

1. dataTransfer对象的两个主要方法，getData()和setData()
   setData的第一个参数表示保存的数据类型，取值为"text"和"URL"，也是getData的唯一参数。
   保存在dataTransfer对象中的数据只能在drop事件处理程序中读取

//设置和接收文本数据
event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");

//设置和接收URL
event.dataTransfer.setData("URL", "http://www.baidu.com");
var url = event.dataTransfer.getData("URL");

2. dataTransfer对象的两个属性，dropEffect和effectAllowed
   这两个属性用来确定被拖动元素以及放置目标元素能够接收什么操作，这两个属性只是决定在把元素拖动到目标元素上时，光标显示为什么样的符号，至于实现光标所指示的动作则完全取决于你。

dropEffect属性可以知道被拖动的元素能够执行哪种放置行为，必须在ondragenter事件处理程序中来设置，且必须搭配effectAllowed属性一起使用。

dropEffect	说明
none	不能把拖动的元素放在这里，这是除文本框之外所有元素的默认值
move	应该把拖动的元素移动到放置目标
copy	应该把拖动的元素复制到放置目标
link	表示放置目标会打开拖动的元素

effectAllowed属性表示允许拖动元素的哪种dropEffect，必须在ondragstart事件处理程序中设置。

effectAllowed	说明
uninitiallized	没有给被拖动的元素设置任何放置行为
none	被拖动的元素不能有任何行为
copy	只允许值为copy的dropEffect
link	只允许值为link的dropEffect
move	只允许值为move的dropEffect
copyLink	允许值为copy和link的dropEffect
copyMove	允许值为copy和move的dropEffect
linkMove	允许值为link和move的dropEffect
all	允许任意dropEffect