HTML5新增拖拽事件

在HTML5中，认为任何元素都可以拖拽；
首先设置被拖拽的元素的attribute属性：

<input  draggable="true">

拖拽七兄弟

源对象事件

dragstart
当用户开始拖动元素或选择文本时触发此事件。
drag
拖动元素或选择文本时触发此事件。
drop
当在有效放置目标上放置元素或选择文本时触发此事件。
该事件浏览器默认阻止，可以在dragover中设置取消默认事件；

目标对象事件

dragenter
当拖动的元素或选择文本输入有效的放置目标时，会触发此事件。
dragover
当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时，会触发此事件。
dragend
当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件。
dragleave
当拖动的元素或文本选择离开有效的放置目标时，会触发此事件。

DataTransfer 对象

在进行拖放操作时，用来保存，通过拖放动作，拖动到浏览器的数据。
有两个常用的方法：

setData()

为一个给定的类型设置数据。

 obj.setData(type,data);
 type
要添加的数据类型.
常见类型：
text/html;和url
data
要添加的数据.指的是要添加的元素

document.ondragstart = function(e){
//  setData()方法在dragstart事件中调用；
//	记录当前源对象的id名；
  e.dataTransfer.setData('text/html',e.target.id);
}

getData()

为一个给定的类型设置数据。

obj.getData(type);
type
要检索的数据类型；要跟setData()里面的保持一致；

document.ondrop=function(e){
  //  getData()方法在drop事件中调用；
  // 新建一个变量用于储存之前记录的源对象的id名
  var id = e.dataTransfer.getData('text/html');
  //  同过id获取源对象，并把它添加到目标对象里面
  e.target.appendChild(document.getElementById(id));
}

小结

拖拽事件需要用事件委托的方法，委托给父级或者document；