在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；
