参考文章：
HTML Drag and Drop API
拖放事件
拖放事件有 dragstart, drag, dragenter, dragleave, dragover, drop, dragend，其中除了dragover 和 drop 是发生在target上的，其它都是发生在 source 上。接下来解释一下这些事件。
从 MDN 上复制的代码，稍微修改了一下
<p>See the Pen <a href="http://codepen.io/jsAllen/pen/ZpAyOy/">test drag and drop event</a> by jsAllen (<a href="http://codepen.io/jsAllen">@jsAllen</a>) on <a href="http://codepen.io">CodePen</a>.</p>
function dragstart_handler(ev) {
console.log("dragStart");
ev.dataTransfer.setData("text", ev.target.id);
}
function drag_handler(ev){console.log("drag");}
function dragenter_handler(ev) {console.log("dragEnter");}
function dragleave_handler(ev) {console.log("dragLeave");}
function dragend_handler(ev) {console.log("dragEnd");}
function dragover_handler(ev) {
console.log("dragOver");
ev.preventDefault();
}
function drop_handler(ev) {
console.log("Drop");
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
function init() {
var source = document.getElementById("source");
source.addEventListener('dragstart',dragstart_handler);
//此处注释掉避免频繁的打印，影响观察 //source.addEventListener('drag',drag_handler);
source.addEventListener('dragenter',dragenter_handler);
source.addEventListener('dragleave',dragleave_handler);
source.addEventListener('dragenter',dragenter_handler);
source.addEventListener('dragend',dragleave_handler);
var target = document.getElementById("target");
target.addEventListener('dragover',dragover_handler);
target.addEventListener('drop',drop_handler);
}
init();
将 source 从原来位置放到 target 中，打印的内容是：
这里主要要讲的是，dragenter 和 dragleave 。先入为主，自己刚开始理解是进入和离开target时，会触发dragenter和dragleaver，但在测试中发现，自己犯了一个很低级的错误，因为source可以放到多个容器中，不一定是我们 要放的target中，看看官方的解释：
所以在测试中，会看到，source 一移出原来位置一点距离，就触发 dragenter，如果source 整个移出原来的位置，就触发 dragleave。
*这里需要注意的是，大部分元素默认是不允许放置的，无论用户如何操作，都不会发生drop事件，要使其变成有效的放置目标，方法是重写dragover事件的默认行为：
function dragover_handler(ev) {
ev.preventDefault();
}
DataTransfer
- setData 和 getData : 存放被拖动元素和被放置元素之间的交流信息
function dragstart_handler(ev) {
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
}
function drop_handler(ev) {
ev.dataTransfer.getData("text/plain");
ev.dataTransfer.getData("text/html");
ev.dataTransfer.getData("text/uri-list");
}
- setDragImage: 定义拖动时的样式
默认点击被拖动元素的某一位置，则拖动时会有被拖动元素的虚拟对象，并且鼠标指针在被拖动元素中的位置为点击时的位置。常见的设置如下：
//改变鼠标指针的位置为虚拟被拖动元素的左上角
ev.dataTransfer.setDragImage(ev.target, 0, 0);
- effectAllowed 和 dropEffect
通过 dropEffect 属性可以知道被拖动的元素能够执行哪种放置行为。这个属性有下列4个可能的值: none, move,copy, link。一般在被放置元素的dragover事件回调中设置。
dropEffect 属性只有搭配 effectAllowed 属性才有用。effectAllowed 属性表示允许拖放元素的哪种 dropEffect，effectAllowed 属性可能的值如下:
uninitialized, none, copy, link, move, copyLink, copyMove, linkMove, all。一般在被拖动元素的 dragstart 事件回调中设置。
个人认为这两个属性的作用是：
（1）用于限制对方元素。譬如被放置元素上设置 dropEffect 为 move，则想要放置到该元素上的元素，必须设置 effectAllowed 能够 “包含” move。
（2）用于控制鼠标指针的样式，move, line, copy 的鼠标样式是不一样。
effectAllowed 和 dropEffect 的值 move 和 copy 很容易让人产生误解，以为设置了move，被移动的元素的元素会自动移除，而 copy 不会被移除。个人理解加上一些实验（See the Pen <a href="https://codepen.io/SitePoint/pen/epQPNP/">Native Drag and Drop - the effectAllowed and the DropEffect properties</a> by SitePoint (<a href="http://codepen.io/SitePoint">@SitePoint</a>) on <a href="http://codepen.io">CodePen</a>.（非本人所写）），觉得 move 和 copy 只是定义上的，实际是 copy 还是 move 是你在 drop 事件回调中控制的，在《javascript高级程序设计》（第484页）中有一段话，很好的解释了这件事：
在把元素拖动到放置目标上时，以上（指 move, copy, noe, link）每一个值都会导致光标显示为不同的符号。然而，要实现光标所指示的动作完全取决于你。换句话说，如果你不介入，没有什么会自动移动、复制，也不会打开链接。总之，浏览器只是帮你改变光标的样式，而其他的都要靠你自己来实现。
一般情况下，如果你通过获取 id 来移动节点，这能实现 move 效果：
function dragstart_handler(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop_handler(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
如果你通过 innerHTML 和 outerHTML 来添加节点，能实现copy效果，除非你再手动remove 被拖动的元素。
