原生拖放

【拖放事件】

通过拖放事件，可以控制拖放的各个方面。我们需要关注的是，确定在哪里发生拖放事件，是在被拖动元素上触发？还是在放置目标上触发？

（一）拖动元素时，会依次触发以下事件：

1. dragstart   按下鼠标键并开始移动时触发
2. drag        在元素拖动期间持续触发
3. dragend     拖动停止时触发（无论市放在有效还是无效的目标上）

（二）当元素被拖动在放置目标上时，依次触发以下事件：

1. dragenter     刚进入放置目标时触发，相当于mouseover
2. dragover      只要在放置目标内移动，会持续触发
3. dragleave     元素被拖出放置目标时触发，相当mouseout
或 drop           元素被放在了放置目标中

有些元素默认不允许放置，即不会发生drop事件。若想把任何元素变成有效的放置目标，可以通过重写元素的dragenter和dragover事件的默认行为。Eventil.preventDefault(event);

---

【dataTransfer对象】

dataTransfer对象：在拖放元素时实现数据交换，从被拖动元素向放置目标传递字符串格式的数据。该对象只能在拖放事件的事件处理程序中被访问。而保存在dataTransfer对象中的数据只能在drop事件处理程序中读取。

1.dataTransfer对象的两个主要方法：

1. getData(数据类型)
2. setData(数据类型，字符串形式数据)

数据类型有: "text"或"URL"

var dataTransfer = event.dataTransfer;
//读取url
var url = dataTransfer.getData("URL")|| dataTransfer.getData("text/uri-list");
//读取文本
var text = dataTransfer.getData("Text"); 

2.dataTransfer对象的两个主要属性：

1. effectAllowed属性作用于被拖放元素，指定元素可执行哪种dropEffect。
   必须在dragstart事件的事件处理程序中设置；

2. dropEffect 属性作用于放置目标，了解被拖动元素能执行哪种放置行为。
   必须在dragenter事件的事件处理程序中针对放置目标来设置dropEffect的值。

effectAllowed的值有：

1. uninitialized    没有为被拖动元素设置任何放置行为
2. none             被拖动元素不能有任何放置行为
3. move             只允许值为move的dropEffect
4. copy             只允许值为copy的dropEffect
5. link             只允许值为link的dropEffect
6. copyLink         允许值为copy和link的dropEffect
7. copyMove         允许值为copy和move的dropEffect
8. linkMove         允许值为link和move的dropEffect
9. all              允许任意dropEffect

dropEffect的值有：

1. none   不能放置在该目标上
2. move   移动到放置目标上
3. copy   复制到放置目标上
4. link   当被拖动元素是URL时，放置目标会打开被拖动元素

---

【设置元素可拖放】

默认情况下，图像和链接在任何时候都可拖动，文本在被选中的情况下也可以拖动。

自定义拖动元素：

1. 给元素添加draggable属性，值为true
2. 对于IE9及更早版本，在mousedown事件处理程序（按下任意鼠标按钮时触发）中调用dragDrop()
3. 对于Safari4及之前 版本，还要给拖动元素设置CSS样式
    *[draggable = true] {
                        -khtml-user-drag: element;
                        }