移动端列表长按上下拖动排序_uniapp列表拖拽排序,移动端拖动排序资源-CSDN下载

共8个文件

js：3个

css：3个

png：1个

需积分: 50 196 浏览量 2017-10-31 13:38:33 上传评论 2 收藏 392KB RAR 举报

在移动端应用开发中，用户交互设计是至关重要的一个环节，特别是在数据展示方面。"移动端列表长按上下拖动排序"是一种提升用户体验的功能，允许用户通过简单的手势操作来调整列表项的顺序，使得信息管理更加直观和便捷。这个功能主要利用了HTML5的sortTable技术和触摸事件来实现，专门针对移动设备，包括Android和iOS系统。 sortTable是HTML5中的一种处理表格排序的技术。它允许用户点击表头进行列的升序或降序排列。但在移动端的列表场景中，由于长按操作更符合手机用户的操作习惯，我们不再依赖于表头点击，而是通过长按列表项来触发排序功能。实现这一功能的关键在于捕获并处理触摸事件。触摸事件在移动Web开发中扮演着核心角色，它们提供了对用户触摸屏幕行为的精细控制。在这个场景中，我们主要关注三个触摸事件：`touchstart`、`touchmove`和`touchend`。 1. `touchstart`事件：当用户手指触碰屏幕时触发，可以记录下长按的初始位置和被长按的列表项。 2. `touchmove`事件：手指在屏幕上移动时触发，此时我们需要计算手指移动的距离，并更新列表项的位置，实现拖动效果。同时，为了保持列表的连续性，需要实时调整相邻元素的位置。 3. `touchend`事件：当用户手指离开屏幕时触发，此时可以确认排序的最终位置，并更新数据源以保存新的排序状态。实现这一功能还需要考虑一些细节优化： - **手势识别**：为了确保只有长按时才启动排序，需要设置一个长按时间阈值（如300ms），如果用户在该时间内没有松开手指，则视为长按操作。 - **滑动冲突**：在处理`touchmove`事件时，需要判断用户的滑动是否超出列表范围，防止误触发滚动操作。 - **动画效果**：为了提供更好的用户体验，可以在拖动过程中添加平滑的过渡动画，使列表项的移动看起来更自然。 - **设备兼容性**：虽然主要目标是Android和iOS，但应确保代码具有良好的浏览器兼容性，考虑到不同设备和浏览器可能存在的差异。在实际开发中，我们可以使用JavaScript库，如Hammer.js，来简化触摸事件的处理，同时结合CSS3的transform属性来实现平滑的动画效果。此外，为了优化性能，可能需要使用虚拟列表（Virtual Scrolling）技术，只渲染可视区域内的列表项，避免大量DOM操作导致的性能问题。移动端列表长按上下拖动排序是一个结合了HTML5技术、触摸事件处理和用户体验设计的功能。它的实现涉及到了前端开发的多个方面，包括事件监听、数据绑定、动画实现以及性能优化，是提升移动应用交互性的典型案例。

资源推荐

资源详情

资源评论

收起资源包目录

sort.rar （8个子文件）

sort

css

sort.css 2KB

reset.css 2KB

animation.css 216B

sort.html 4KB

images

sort-bg.png 344KB

Sortable.js 35KB

Sortable.min.js 15KB

jquery-3.2.1.min.js 85KB

<!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>

评论收藏

内容反馈