html5 拖动效果在手机上实现方法是调用drag和drop一系列函数实现的。
注意：拖拽源在拖拽操作结束将得到dragend事件对象，不管操作成功与否。
举例：
定义可拖放内容
<div id="columns">
<div class="column" draggable="true"><header>A</header></div>
<div class="column" draggable="true"><header>B</header></div>
<div class="column" draggable="true"><header>C</header></div>
</div>
2、监听拖动事件
可附加大量不同事件以监听整个拖放过程：
dragstart
drag
dragenter
dragleave
dragover
drop
dragend
a.这里是开始拖拽
function handleDragStart(e) {
this.style.opacity = '0.4' // this / e.target is the source node.
}
var cols = document.querySelectorAll('#columns .column')
[].forEach.call(cols, function(col) {
col.addEventListener('dragstart', handleDragStart, false)
})
b.dragenter、dragover 和 dragleave 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。
拖拽发生过程被拖拽元素
dragstart按下鼠标键并开始移动鼠标时
drag在dragstart事件之后，在元素被拖动期间会持续触发该事件
dragend当拖动停止时，会触发dragend事件
放置目标元素
dragenter有元素被拖动到放置目标上
dragover紧随dragenter发生，在被拖动的元素
还在放置目标范围内移动时，会持续触发该事件
dragleave在元素被拖出放置目标时触发
drop元素被放到了放置目标中触发
注释：拖拽发生过程：dragstart->drag->dragenter->dragover->dragleave/drop->dragend
DataTransfer对象：退拽传递的对象，一般使用Event.dataTransfer。2
draggable属性，标签元素设置值为true。drangable=true。
3
ondragstart事件:元素被拖拽的时候触发的事件，作用在被拖拽元素上。
ondragenter事件:进入目标元素触发事件，作用在目标元素上。
ondragover事件:拖拽元素在目标元素上移动的时候触发的事件，作用在目标元素上。
ondrop事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件，作用在目标元素上。
ondragend事件:拖拽完成后触发事件，作用在被拖拽元素上。
Event.preventDefault()方法:阻止默认方法执行。ondragover中一定要执行preventDefault(),否则ondrop事件不会被 触发。
Event.effectAllowed属性:拖拽的效果。
设置元素为可拖放，draggable属性设置为true。<img draggable="true">
拖动元素 使用ondragstart事件。setData()设置获取元素。
dataTransfer.setData()方法设置被拖数据类型和值:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id)
}
drag(event)声明方法，规定被拖动的数据，类型是"text",值是可拖动元素id获取。
拖拽放入目标 ondragover，ondragover事件规定在何处放置被拖拽的数据。
一定要定义event.preventDefault(),来阻止默认动作。
进行放置 ondrop 当放置被拖数据时，会发生drop事件。
function drop(ev){
ev.preventDefault()
var data=ev.dataTransfer.getData("text")
ev.target.appendChild(document.getElementById(data))
}
