20170613-原生拖放

重点知识

拖放事件

拖动某元素时，会在被拖动元素上以此触发下列事件：

• dragstart:当拖拽元素开始被拖拽的时候触发的事件

• drag:当拖拽元素的过程中一直触发的事件

• dragend：当拖拽完成后触发的事件

当某个元素被拖放到一个有效的放置目标上时，放置目标上回依次触发下列事件：

• dragenter:当拖曳元素进入目标元素的时候触发的事件

• dragover:拖拽元素在目标元素上移动的时候触发的事件

• dragleave:当拖曳元素离开目标元素的时候触发的事件

• drop:被拖拽的元素在目标元素上同时鼠标放开触发的事件

自定义放置目标：

在拖放元素经过某些无效放置目标时，可以看到一种特殊的光标(圆环中有一条反斜线)，表示不能放置。虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素，无论用户如何操作，都不会触发drop事件。不过，你可以把任何元素变成有效的放置目标，方法是：重写dragenter和dragover事件的默认行为。

例如，假如一个ID为“droptarget”的div元素，可以用如下代码将它变成一个放置目标

var droptarget = document.getElementById('droptarget')
droptarget.addEventListener('dragover', function(event){
    event.preventDefault()
}
droptarget.addEventListener('dragenter', function(event){
    event.preventDefault()
}

dataTransfer对象

dataTransfer对象，它是事件对象的一个属性，用于从被拖放元素向放置目标传递字符串格式的数据。

detaTransfer对象有两个主要方法：getData()和setData()。setData()方法的第一个参数，也是getData()方法的唯一的一个参数，是一个字符串，表示保存的数据类型，取值为“text”和“URL”

event.dataTransfer.setData("text", "some text");
var text = event.dataTransfer.getData("text");

• 注意：保存在dataTransfer对象中的数据只能在drop事件处理程序中读取。

可拖动

默认情况下，只有图像、链接、文本是可以拖动的。让其他元素可以拖放也是可能的。HTML5为所有HTML元素规定了一个draggable属性，表示元素是否可以拖动。图像和链接的draggable属性自动设置成了true，而其他元素这个属性的默认值都是false。通过设置这个属性可以使其他元素可拖动

<div draggable="true">...</div>

相关实例

<div class="dustbin">
  <br/>垃<br/>圾<br/>桶
</div>
<div class="dragbox">
  <div class="drag-item" draggable="true">item 1</div>
  <div class="drag-item" draggable="true">item 2</div>
  <div class="drag-item" draggable="true">item 3</div>
  <div class="drag-item" draggable="true">item 4</div>
  <div class="drag-item" draggable="true">item 5</div>
</div>
<div class="dragremind"></div>

var dustbin = document.querySelector('.dustbin');
var draglist = document.getElementsByClassName('drag-item');
var remind = document.querySelector('.dragremind');
var dragElem = null;

for(var i=0;i<draglist.length;i++){
  draglist[i].addEventListener("drag", function(event){
    event.dataTransfer.effectAllowed = "move";
    dragElem = event.target;
  });
  
}

dustbin.addEventListener("dragover", function(event){
  event.preventDefault();
});

dustbin.addEventListener("dragenter", function(event){
  event.preventDefault();
  this.style.color = "#fff";
});
dustbin.addEventListener("dragleave", function(event){
  this.style.color = "#000";
});

dustbin.addEventListener("drop", function(event){
  if(dragElem){
    remind.innerText = dragElem.innerText;
    dragElem.parentElement.removeChild(dragElem);
    this.style.color = "#000";
  }
});

参考资料

《JavaScript高级程序设计》

HTML5 drag & drop 拖拽与拖放简介