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

最新推荐文章于 2024-06-19 15:39:02 发布
最新推荐文章于 2024-06-19 15:39:02 发布
阅读量1w 收藏 12
点赞数 2
分类专栏： 前端 文章标签： 移动端 触摸 长按 拖动 排序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_20565303/article/details/78207935
版权

简述：移动端列表长按后，然后可以上下拖动进行排序，主要使用了基于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>
			<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.οncοntextmenu=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>
以上代码主要引入了 zepto.min.js 和 原生js实现的Sortable.js，以及jQuery的插件。

有一个缺点，就是ios端长按后会出现选择复制，不过不影响相应功能。

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

本实例源码地址：https://download.csdn.net/download/qq_20565303/10343957


tywangh
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
移动端数组拖拽排序
weixin_49757064的博客
11-25 154
【代码】移动端数组拖拽排序。
移动端列表长按上下拖动排序
10-31
移动端列表长按后，然后可以上下拖动进行排序，主要使用了基于h5 sortTable，然后使用了touch相关事件实现，仅支持移动端,支持安卓和苹果。
如何在Vue3中实现列表项的拖拽排序功能
最新发布
有我更精彩的博客
06-19 937
拖拽排序功能允许用户通过拖拽操作来改变列表项的位置。捕捉用户的拖拽事件。更新列表的排序。幸运的是，我们不需要从头开始构建这个功能，有很多现成的库可以帮助我们实现它。在这篇文章中，我们将使用库来方便地实现列表项的拖拽排序。
移动端列表长按上下拖动排序（新）
04-12
移动端列表长按后，然后可以上下拖动进行排序，主要使用了基于h5 sortTable，然后使用了touch相关事件实现，仅支持移动端,支持安卓和苹果。
长按拖动排序
01-26
/* * 使用方法 **/ //- (void)viewDidLoad { // [super viewDidLoad]; // // Do any additional setup after loading the view. // self.view.backgroundColor = [UIColor grayColor]; // // StBtnTouchMove *stBtn = [[StBtnTouchMove alloc]initWithFrame:CGRectMake(0, 200, 375, 100)]; // [self.view addSubview:stBtn]; // stBtn.buttonArray = [[NSMutableArray alloc]init]; // for (NSInteger i = 0; i < 4; i++) { // UIButton *btn = [[UIButton alloc]initWithFrame:CGRectMake(i*375/4.0, 0, 375/4.0, 100)]; // [stBtn addSubview:btn]; // [btn setTitle:[NSString stringWithFormat:@"btn%ld",i] forState:UIControlStateNormal]; // btn.backgroundColor = [UIColor redColor]; // [stBtn.buttonArray addObject:btn]; // [btn addTarget:self action:@selector(btnClick) forControlEvents:UIControlEventTouchUpInside]; // } // [stBtn touchMove]; //}
移动端拖动排序
12-26
改控件很简短，使用方便，页面层次很清晰，拖动的效果也特别好
便签列表项长按拖动排序
09-19
“锤子便签”中有一个功能就是将列表项长按并上下拖动，手指移动到哪里，列表项就跟随到哪里，其他列表项自动给被拖动的列表项“让路”，实现人为排序功能，个人觉得非常人性化，于是仿照DragGirdView自己也做了一个DragListView，实现这个功能！
移动端和pc端拖动排序
07-24
"移动端和PC端拖动排序"是一项常见的功能，允许用户通过直观的拖放操作来调整列表中的项目顺序。这种功能在各种应用场景中都很常见，比如任务管理、日程安排、文件管理等。在本案例中，实现这一功能主要依赖于`drag-...
Shapeshift- 支持IOS，Android，手机 移动端 拖拽排序功能
12-23
Shapeshift是一款强大的移动应用，特别为iOS和Android平台设计，旨在提供便捷的拖拽排序功能，让用户在手机移动端上可以轻松地通过手势调整项目顺序。这个功能在各种场景下都极其有用，例如整理列表、排列任务、组织...
LongPressDrag:长按拖动重新排序
06-07
"LongPressDrag:长按拖动重新排序" 是一种常见的交互设计模式，特别是在列表或网格视图中，它允许用户通过长按元素并拖动来改变其顺序。这个功能常见于各种应用，如任务管理器、音乐播放列表或照片库。下面我们将...
移动端拖拽排序添加删除效果
08-12
在移动端应用中，提供用户友好的交互体验是至关重要的，其中拖拽排序和添加删除功能是常见的需求。本文将深入探讨如何使用JavaScript实现移动端的拖拽排序和添加删除效果。 一、理解拖拽排序（Drag and Drop） ...
长按手势拖拽排列顺序并保存记录
09-27
长按排序，结果并保存本地，下次启动依然上次是排序过的结果
vue实现移动端拖动排序
10-14
主要为大家详细介绍了vue实现移动端拖动排序，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js 拖动排序，文本拖动，图片拖动，支持移动端，兼容性好。
02-25
js 拖动排序，文本拖动，图片拖动，支持移动端，兼容性好。
高仿网易的长按拖动排序，可删除，可添加，点击完成后不可拖，不可删（根据网上的代码修改）
01-14
高仿网易的长按拖动排序，可删除，可添加，点击完成后不可拖，不可删（根据网上的代码修改）
zepto-dragswap:一个具有可交换可拖动可排序列表和网格的微型插件
06-20
HTML5 可排序 Zepto.js 插件 ！！手机警告！！ 该插件使用原生HTML5 拖放，这意味着任何移动浏览器/设备都不支持。 请参阅条目。 如果您需要触摸支持，请查看或 。 为什么不可排序 它是可排序的，但它更像是可交换的...... 特征 2KB（缩小）。 使用原生 HTML5 拖放 API 构建。 支持列表和网格样式布局。 使用 CSS3 添加放置动画。 移动、跳过、删除和排除的类控制。 用于检测动画结束的供应商前缀吸气剂。 适用于 IE 7+、Firefox 16+、Chrome 23+、Safari 5.1+ 和 Opera 12.1+。 用法 使用sortable方法创建一个可排序的列表： $ ( '.sortable' ) . dragswap ( { element : 'li' , // the child element you are
JS案例 - 基于vue的移动端长按手势
weixin_34370347的博客
07-07 604
================================惯例碎碎念前言================================ 当时首先想到要做长按事件的时候，我想到的是vue内部的自定义指令，毕竟官网里边有这么一句描述： 有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。 但是项目用在app中，因为另一个未知原因的bug，自定义事件躺枪(至今...
移动端上下拖动调整顺序效果_vue上下移动排序
weixin_39752157的博客
12-20 755
最近做的项目上有一个排序功能图片.png以前就很少用js的sort，正好可以补补了先说说sort方法直接用 arr.sort()是按照ASCII码排序 大家可以看看文档他还可以加参数 来自定义排序function sortNumber(a,b){return a - b}var arr = new Array(6)arr[0] = "10"arr[1] = "5"arr[2] = "40"arr...
qgraphicsview 添加矩形框并拖动改变大小_Axure教程：列表拖动排序
weixin_39845113的博客
12-06 392
本文将为大家介绍如何用Axure实现列表拖动排序的上下拖动，希望该教程对你有所帮助。最近使用Axure过程中碰到要对列表做排序，自然想到的是用中继器来实现。看了这篇文章《Axure教程：列表拖动排序的实现方式》 受到了不少的启发，但是只能向上拖动毕竟不太好，经过研究发现还是有办法实现上下拖动的。我使用的是Axure RP 9，如果是Axure RP 8原理上基本相同。一、原型原理要进行拖动排序，主...
touchmove 长按_移动端 javascript 实现长按拖动
05-13
要实现移动端 JavaScript 实现长按拖动，可以使用 touchstart、touchmove、touchend 事件来实现，具体的实现步骤如下： 1. 给需要长按拖动的元素添加 touchstart 事件，并记录开始触摸的时间戳。 2. 给需要长按拖动的元素添加 touchmove 事件，在事件处理函数中，判断当前触摸点的坐标与开始触摸点的坐标的距离是否超过一定的阈值，如果超过了阈值，就认为用户开始长按并移动元素，此时可以将元素的位置进行更新。 3. 给需要长按拖动的元素添加 touchend 事件，在事件处理函数中，判断当前触摸点离开时间与开始触摸的时间戳之差是否超过一定的阈值，如果超过了阈值，就认为用户已经松开了长按，并完成了拖动操作。 下面是一个简单的实现示例代码： ```javascript // 获取需要长按拖动的元素 var box = document.getElementById('box'); // 记录开始触摸的时间戳和元素的位置 var startTimestamp = 0; var startX = 0; var startY = 0; // 给元素添加 touchstart 事件 box.addEventListener('touchstart', function(event) { // 记录开始触摸的时间戳和元素的位置 startTimestamp = event.timeStamp; startX = event.touches[0].pageX; startY = event.touches[0].pageY; }); // 给元素添加 touchmove 事件 box.addEventListener('touchmove', function(event) { // 判断是否已经开始长按 if (event.timeStamp - startTimestamp > 500) { // 计算当前触摸点与开始触摸点的距离 var distanceX = event.touches[0].pageX - startX; var distanceY = event.touches[0].pageY - startY; // 更新元素的位置 box.style.transform = 'translate(' + distanceX + 'px, ' + distanceY + 'px)'; } }); // 给元素添加 touchend 事件 box.addEventListener('touchend', function(event) { // 判断是否已经开始长按 if (event.timeStamp - startTimestamp > 500) { // 完成长按拖动操作 console.log('长按拖动完成'); } }); ``` 这是一个简单的示例，实际上还可以根据需求进行更复杂的操作，比如添加 touchcancel 事件，处理多点触控等情况。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值