拖拉事件
拖拉 drag ，是指用户在某个对象上按下鼠标键不放，拖动它到另一个位置，然后释放鼠标键，将该对象放在那里。
一旦某个元素节点的 draggable 属性设为true，就无法再用鼠标选中该节点内部的 文字 或 子节点 了
- 拖拉的对象：
除了 元素节点 默认不可以拖拉，其他（图片、链接、选中的文字）都是可以直接拖拉的
- 为了让 元素节点 可拖拉，可以将该节点的 draggable 属性设为 true
<div draggable="true">
此区域可拖拉
</div>
图片（<img>）和 链接（<a>）不加这个属性，就可以拖拉。
往往是将 draggable 其设为 false，防止拖拉这两种元素
- 当 元素节点 或 选中的文本 被拖拉时，就会持续触发拖拉事件
drag 拖拉过程中，在被拖拉的节点上持续触发（相隔几百毫秒）。
dragstart 用户开始拖拉时，在被拖拉的节点上触发
该事件的 target 属性是被拖拉的节点。
通常应该在这个事件的监听函数中，指定拖拉的数据。
dragend 拖拉结束时（释放鼠标键或按下 ESC 键）在被拖拉的节点上触发
该事件的 target 属性是被拖拉的节点。
它与 dragstart 事件，在同一个节点上触发。
不管拖拉是否跨窗口，或者中途被取消，dragend事件总是会触发的。
- 在 某节点 触发
dragenter 拖拉进入 某节点 时，在 某节点 上触发一次
该事件的 target 属性是 某节点。
通常应该在这个事件的监听函数中，指定是否允许在 某节点 放下（drop）拖拉的数据。
如果 某节点 没有该事件的监听函数，或者 监听函数不执行任何操作，就意味着不允许在当前节点放下数据。
在视觉上显示拖拉进入当前节点，也是在这个事件的监听函数中设置。
dragover 拖拉到 某节点 上方时，在 某节点 上持续触发（相隔几百毫秒）
该事件的 target 属性是 某节点 。
该事件与 dragenter 事件的区别是
- dragenter事件在进入该节点时触发
- 只要没有离开这个节点，dragover 事件会持续触发。
dragleave 拖拉操作离开 某节点 范围时，在 某节点 上触发一次
该事件的 target 属性是当前节点
如果要在视觉上显示拖拉离开操作当前节点，就在这个事件的监听函数中设置。
drop 被拖拉的节点或选中的文本，释放到 某节点 时，在 某节点 上触发
注意：
- 如果 某节点 不允许 drop，即使在该节点上方松开鼠标键，也不会触发该事件
- 如果用户按下 ESC 键，取消这个操作，也不会触发该事件
该事件的监听函数负责取出拖拉数据，并进行相关处理
- 实例：
动态改变被拖动节点的背景色
div.addEventListener('dragstart', function (e) {
this.style.backgroundColor = 'red';
}, false); div.addEventListener('dragend', function (e) {
this.style.backgroundColor = 'green';
}, false);