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对象，它是事件对象的一个属性，用于从被拖放元素向放置目标传递字符串格式的数据。

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。通过设置这个属性可以使其他元素可拖动

...

  
垃
圾
桶


  
item 1
  
item 2
  
item 3
  
item 4
  
item 5

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

for(var i=0;i
参考资料
《JavaScript高级程序设计》
HTML5 drag & drop 拖拽与拖放简介