hmtl5 拖放研究

参考文章：
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

1. 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");
}

2. setDragImage: 定义拖动时的样式
   默认点击被拖动元素的某一位置，则拖动时会有被拖动元素的虚拟对象，并且鼠标指针在被拖动元素中的位置为点击时的位置。常见的设置如下：

//改变鼠标指针的位置为虚拟被拖动元素的左上角
ev.dataTransfer.setDragImage(ev.target, 0, 0);

3. 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 被拖动的元素。