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 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。
以下直接可以运行。如果DIV在ID为area的div中，即可拖拽。我在Drag函数里做了对父div的判断。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>鼠标拖拽</title>
<script type="text/javascript">
function Drag(o, e){
if(o.parentElement!=document.getElementById('area')) return
var e = window.event || e
var _x = e.offsetX || e.layerX
var _y = e.offsetY || e.layerY
o.style.filter = 'Alpha(opacity=70)'
o.style.opacity = '0.7'
document.onmousemove = function(e){
var e = window.event || e
o.style.left = e.clientX - _x + 'px'
o.style.top = e.clientY - _y + 'px'
o.style.cursor="move"
}
document.onmouseup = function(e){
document.onmousemove = null
o.style.filter = o.style.opacity = ''
o.style.cursor="default"
}
}
</script>
</head>
<body>
<div id='area'>
<div onmousedown="Drag(this, event)" style="position:absoluteborder:1px solid redbackground:pinkwidth:400pxheight:300px"></div>
</div>
<div onmousedown="Drag(this, event)" style="position:absoluteleft:500pxborder:1px solid redbackground:pinkwidth:400pxheight:300px"></div>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
/*.column {float: left}*/
.column div{width: 178pxheight: 56pxmargin-bottom: 2px}
.box1{background-color: black}
.box2{background-color: bisque}
.box3{background-color: gray}
.box4{background-color: wheat}
</style>
</head>
<body>
<div class="column" draggable="true">
<div class="box1">
</div>
</div>
<div class="column" draggable="true">
<div class="box2">
</div>
</div>
<div class="column" draggable="true">
<div class="box3">
</div>
</div>
<div class="column" draggable="true">
<div class="box4">
</div>
</div>
<script>
function handleDragStart(e) {
this.style.opacity = '1'
dragSrcEl = this
e.dataTransfer.effectAllowed = 'move'
e.dataTransfer.setData('text/html', this.innerHTML)
}
function handleDragEnter(e) {
this.classList.add('over')
}
function handleDragLeave(e) {
this.classList.remove('over')
}
function handleDragOver(e) {
if (e.preventDefault) {
e.preventDefault()
}
return false
}
//拖拽完成后，作用在拖拽元素上
function handleDrop(e) {
if (dragSrcEl != this) {
dragSrcEl.innerHTML = this.innerHTML
this.innerHTML = e.dataTransfer.getData('text/html')
}
return false
}
//拖拽完成后，作用在被拖拽元素上
function handleDragEnd(e) {
this.style.opacity = '1'
[].forEach.call(divs, function(d) {
d.classList.remove('over')
})
}
var divs = document.querySelectorAll('.column')
[].forEach.call(divs, function(d) {
d.addEventListener('dragstart', handleDragStart, false)
d.addEventListener('dragenter', handleDragEnter, false)
d.addEventListener('dragover', handleDragOver, false)
d.addEventListener('dragleave', handleDragLeave, false)
d.addEventListener('drop', handleDrop, false)
d.addEventListener('dragend', handleDragEnd, false)
})
</script>
</body>
</html>
可以实现你要的效果 不过看到晚了，可以拖动交换位置和数据
