html5 拖动效果怎么在手机上实现

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 事件处理程序可用于在拖动过程中提供额外的可视化提示。例如，在拖动期间将鼠标悬停在某一列上方时，其边框可能会变成虚线。这样，用户就能知道这些列也是放置的目标区域。

其实就是这个样子的。

<script type="text/javascript">

function allowDrop(ev)

{

ev.preventDefault()//阻止默认事件。

}

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id)//鼠标拖动图片的时候，将图片id复制到剪贴板上

}

function drop(ev)

{

ev.preventDefault()

var data=ev.dataTransfer.getData("Text")//在框内松开鼠标，获取剪贴板中的内容

ev.target.appendChild(document.getElementById(data))//将id为data的内容插入到框中

}

</script>

被拖动的元素增加draggable="true"属性；

接受拖过来的元素要接受新元素，ondragover 事件触发的时候要禁止自设的默认事件e.preventDefault()

监听ondrop事件，将元素进行插入appendChild；

---