您的位置：首页 > 移动开发

移动端列表长按后上下拖动进行排序

2017-10-11 20:24 591 查看

简述：移动端列表长按后，然后可以上下拖动进行排序，主要使用了基于h5 sortTable，然后使用了touch相关事件实现，仅支持移动端。

效果图：

长按下后拖动过程中的效果，如果不长按，只能上下滑动：

代码实现解析：

首先看html的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>排序页</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/sort.css">
<link rel="stylesheet" type="text/css" href="css/animation.css">
</head>
<body>
<div class="nav">
<a href="" ></a>
<span></span>
<p>自定义排序</p>
</div>
<div id="sort">
<p>系统将根据下面排列的顺序制定课程，长按拖动可调换顺序</p>
<ul id="foo" class="block__list block__list_words">
<li id="uli" class="action-btn">
<p>《芳华》</p>
<span>严歌苓</span>
</li>
<li id="uli" class="action-btn">
<p>《从你的全世界路过》</p>
<span>张嘉佳</span>
</li>
<li id="uli" class="action-btn">
<p>《从0到1》</p>
<span>彼得•蒂尔</span>
</li>
<li id="uli" class="action-btn">
<p>《倾城之恋》</p>
<span>张爱玲</span>
</li>
<li id="uli" class="action-btn">
<p>《靠谱》</p>
<span>大石哲之</span>
</li>
<li id="uli" class="action-btn">
<p>《从0到1》</p>
<span>彼得•蒂尔</span>
</li>
<li id="uli" class="action-btn">
<p>《倾城之恋》</p>
<span>张爱玲</span>
</li>
<li id="uli" class="action-btn">
<p>《靠谱》</p>
<span>大石哲之</span>
</li>
<li id="uli" class="action-btn">
<p>《从0到1》</p>
<span>彼得•蒂尔</span>
</li>
<li id="uli" class="action-btn">
<p>《倾城之恋》</p>
<span>张爱玲</span>
</li>
</ul>
</div>
<div class="btn">
<a href="##">下一步</a>
</div>

</body>
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script src="js/Sortable.js"></script>
<script>
var elementsld;
var touch={};
touch.current=0;
touch.lenght=4;
function move(elem,targetW,current){
elem.animate({
translate3d: targetW *current + "px,0,0"
},300,'steps',function(){
});
}

var sort = Sortable.create(document.getElementById('foo'), {
disabled: true,
animation: 150,
onStart: function(){
Zepto("#foo").removeClass("animationframes")
},
onEnd: function () {

sort.options.disabled = true
longtap = false
console.log(elementsld);
elementsld.css("background-color","");
touchmove = true

}
})

var longtap = false
jQuery('#foo li').on("taphold", function () {
elementsld = $(this);
console.log(elementsld);
elementsld.css("background-color","#669999");
longtap = true;
})
Zepto('#foo li').on("touchmove", function(e){
touch.y2 = e.touches[0].pageY;
if(!longtap){
if(touch.y2 < touch.y1){
n = 1;
for (i=n; i>=1; i--){
window.scrollBy(0,+7);
}
}else if(touch.y2 > touch.y1){
n = 1;
for (i=n; i>=1; i--){
window.scrollBy(0,-7);
}
}
}
e.preventDefault()
return false
});

Zepto('#foo li').on('touchstart', function (e) {
touch.y1 = e.touches[0].pageY;
console.log('touchstart', e)
setTimeout(function () {
if (longtap) {



console.log('longtap')
sort.options.disabled = false
sort._onTapStart(e)
}
}, 1000)
e.preventDefault()
return false
})
</script>
</html>

以上代码主要引入了 zepto.min.js 和原生js实现的Sortable.js，以及jQuery的插件。

这个功能新增了长按后，会对当前选择列表添加变色，然后可以拖动。

本实例源码地址：http://download.csdn.net/download/qq_20565303/10046503

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 移动端触摸长按拖动排序

相关文章推荐

新的分享

章节导航