移動端列表長按後上下拖動進行排序
阿新 • • 發佈：2019-01-07
簡述：移動端列表長按後，然後可以上下拖動進行排序，主要使用了基於h5 sortTable，然後使用了touch相關事件實現，僅支援移動端。
效果圖：
長按下後拖動過程中的效果，如果不長按，只能上下滑動：
程式碼實現解析：
首先看html的程式碼：
以上程式碼主要引入了 zepto.min.js 和 原生js實現的Sortable.js，以及jQuery的外掛。<!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> <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> //解決安卓端長按時出現瀏覽器選擇開啟問題 document.oncontextmenu=function(e){ //或者return false; e.preventDefault(); }; 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 (e) { elementsld = $(this); elementsld.css("background-color","#46b99f"); longtap = true; this.bind('contextmenu', function (e) { e.preventDefault(); },false) }) Zepto('#foo li').on('touchstart', function (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); }) </script> </html>
有一個缺點，就是ios端長按後會出現選擇複製，不過不影響相應功能。
這個功能新增了長按後，會對當前選擇列表新增變色，然後可以拖動。
本例項原始碼地址：https://download.csdn.net/download/qq_20565303/10343957