<!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) {
<!-- var selectId = $('#foo li').attr("id") -->
<!-- document.getElementById(selectId).setAttribute("class", "animationframes"); -->
<!-- document.getElementById("foo").setAttribute("class", "animationframes"); -->
console.log('longtap')
sort.options.disabled = false
sort._onTapStart(e)
}
}, 1000)
e.preventDefault()
return false
})
</script>
</html>
移动端列表长按上下拖动排序
需积分: 1 109 浏览量
2017-10-31
13:38:33
上传
评论 2
收藏 392KB RAR 举报
sort.rar （8个子文件） 
sort css 
sort.css 2KB reset.css 2KB animation.css 216B
sort.html 4KB images 
sort-bg.png 344KB js Sortable.js 35KB Sortable.min.js 15KB jquery-3.2.1.min.js 85KB资源评论
