hmtl5 拖放研究

拖放事件

拖放事件有dragstart,drag,dragenter,dragleave,dragover,drop,dragend，其中除了dragover和drop是发生在target上的，其它都是发生在source上。接下来解释一下这些事件。
从MDN上复制的代码，稍微修改了一下

See the Pen test drag and drop event by jsAllen (@jsAllen) on CodePen.

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,link,copyLink,copyMove,linkMove,all。一般在被拖动元素的dragstart事件回调中设置。
个人认为这两个属性的作用是：
（1）用于限制对方元素。譬如被放置元素上设置dropEffect为move，则想要放置到该元素上的元素，必须设置effectAllowed能够“包含”move。
（2）用于控制鼠标指针的样式，move,line,copy的鼠标样式是不一样。

effectAllowed和dropEffect的值move和copy很容易让人产生误解，以为设置了move，被移动的元素的元素会自动移除，而copy不会被移除。个人理解加上一些实验（See the Pen Native Drag and Drop - the effectAllowed and the DropEffect properties by SitePoint (@SitePoint) on CodePen.（非本人所写）），觉得move和copy只是定义上的，实际是copy还是move是你在drop事件回调中控制的，在《javascript高级程序设计》（第484页）中有一段话，很好的解释了这件事：

在把元素拖动到放置目标上时，以上（指move,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被拖动的元素。

hmtl5 拖放研究

拖放事件

DataTransfer

相关文章