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

JavaScript09

html5 拖动效果怎么在手机上实现,第1张

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

这是自己封装的原生js方法,为了偷懒,用了电jqurey。调用方法如下:

touchs._left(object)//往左滑动,

touchs._right(object)//往右滑动

touchs._top(object)//往上滑动

touchs._bottom(object)//往下滑动

说明:object的取值可以是一个id("#id")表达式,或者是一个样式表达式(".class"),或者标签的属性表达式("div[id=id]")等,只要可以用jqurey通过这个表达式获取到dom对象,这个表达式怎么写都可以。