列表拖拽排序组件 - 自定义排序轮子

最新推荐文章于 2025-01-24 17:14:50 发布
最新推荐文章于 2025-01-24 17:14:50 发布
阅读量714 收藏
点赞数
文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TiCrystal/article/details/133357331
版权
小程序 专栏收录该内容
53 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了在微信小程序中创建自定义排序轮子的方法，包括显示可拖拽列表项、监听触摸事件、计算排序位置和更新列表顺序。通过示例代码展示了如何实现这一功能，并提出在实际项目中可按需定制样式和交互。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

介绍
在微信小程序中，拖拽排序是一种常见的交互方式，可以让用户自由调整列表中项目的顺序。本文将演示如何创建一个自定义排序轮子，允许用户在微信小程序中拖拽列表项来重新排序。

实现思路
为了实现列表拖拽排序功能，我们需要完成以下几个步骤：

  1. 显示可拖拽的列表项：首先，我们需要在页面上显示一个可拖拽的列表，其中每个列表项都有一个独特的标识符。我们可以使用小程序的原生组件 movable-view 来实现可拖拽的效果。

  2. 监听触摸事件：我们需要监听触摸事件，以便在用户拖动列表项时获取相应的信息。通过监听 touchstart、touchmove 和 touchend 等事件，我们可以获取触摸位置、列表项的初始位置等。

  3. 计算排序位置：当用户拖动列表项时，我们需要计算其当前位置，并决定它在列表中的新位置。这可以通过比较列表项的位置和其他列表项的位置来实现。

  4. 更新列表顺序：一旦确定了列表项的新位置，我们需要更新列表数据，并将新的顺序渲染到页面上。

源代码实现
下面是一个简单的示例代码，演示了如何创建一个自定义排序轮子：

wxml 文件：


                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        


    


                



	

		

			

				
					
微信小程序 - 详细实现列表拖曳排序功能效果，小程序如何实现列表的拖动排序功能，用户拖动并放手完成排序操作（详细示例代码，一键复制运行）

				
			

			

				

					王二红
				

				

					08-18
					
					4111
					
				

			

		

		

			
				
微信小程序，vue2，vue3，列表拖曳排序，列表拖拽排序，懒加载列表怎么实现拖动排序，页面触底，上拉加载列表，滚动条到底请求数据，如何做排序，可拖拽排序，调整应用位置次序，调换位置，更改顺序，复杂数组，不流畅卡顿怎么办，怎么排序，movable-view，拖拽元素，报错，详细教程，详细运行实例代码，插件组件，最好用，放手，拖曳拖拽，排序，拖动，拖放，小程序如何实现列表的拖动排序功能，手指拖动选项排序，长按拖拽排序，图片拖拽排序组件，微信小程序拖拽排序，列表的上下拖拽排序，菜单menu排序，如何调用后端接口

			
		

	



                

            
              



	

		

			

				
					
微信小程序长按拖拽排序

				
			

			

				

					m0_55969466的博客
				

				

					01-02
					
					4641
					
				

			

		

		

			
				
微信小程序长按拖拽排序。

			
		

	



              


  
              

                


	

		

			

				
					
微信小程序代码实现：拖拽排序列表

				
			

			

				

					06-21
				

			

		

		

			
				
利用movable-view， movable-area实现小程序拖拽功能。

			
		

	





	

		

			

				
					
小程序拖拽排序，拿来即用

				
			

			

				

					12-04
				

			

		

		

			
				
该代码涉及到多层算法，支持微信小程序拖拽排序及H5js拖拽排序，拿来即用。

			
		

	



		

			
		



	

		

			

				
					
Taro-vue3微信小程序实现列表拖拽排序

				
			

			

				

					weixin_71287951的博客
				

				

					09-06
					
					1035
					
				

			

		

		

			
				
taro vue 微信小程序实现列表拖拽排序

			
		

	





	

		

			

				
					
Vue-Element-Admin自定义指令与混入技术实战：提高代码复用性的技巧全览

				
			

			

				

					
				

			

		

		

			
				
![Vue-Element-Admin自定义指令与混入技术实战：提高代码复用性的技巧全览]...同时，本文也详细讲解了混入技术的定义、最佳实践以及如何与组件有效交互。在代码复用性方面，本文探讨了代码复用性的

			
		

	





	

		

			

				
					
【DBGridEh组件深度剖析】：如何自定义与扩展DBGridEh功能

				
			

			

				

					
				

			

		

		

			
				
本文首先介绍了DBGridEh组件的概述、安装和配置，然后详细阐述了其基本操作、定制技巧、事件处理以及分组和排序功能。接着，文章探讨了DBGridEh的高级功能开发，如自定义绘制单元格、数据编辑与验证、集成外部控件等...

			
		

	





	

		

			

				
					
前端拖拽相关功能详解，一篇文章总结前端关于拖拽的应用场景和实现方式（含源码）

					
最新发布

				
			

			

				

					qq_17335549的博客
				

				

					01-24
					
					1770
					
				

			

		

		

			
				
前端的多拽功能详解，拖拽上传图片、文件；拖拽调整分屏宽度；拖拽移动按钮；拖拽排序；拖拽将文件移动到文件夹；处理各种拖砖场景；鼠标事件和drag事件的实际应用

			
		

	





	

		

			

				
					
Unity项目开发框架设计：避免重复造轮子的策略与实践

				
			

			

				

					小宝哥Code的专栏
				

				

					01-20
					
					1807
					
				

			

		

		

			
				
在Unity开发中，“重复造轮子”不仅浪费时间，还会导致项目复杂度增加和技术债务累积。如何高效设计项目框架，充分利用Unity生态资源，避免重复劳动，是每个开发者必须面对的挑战。本指南从工具复用、模块化设计、自动化工作流、团队协作到数据驱动开发，全面解读如何在项目中提升效率与质量。同时，结合AI辅助开发、持续集成（CI/CD）、云端协作等前沿技术，探索未来优化方向。无论是初学者还是资深开发者，都能从中获取实用的策略与灵感，打造高效、稳定、创新的Unity开发流程。

			
		

	





	

		

			

				
					
最简单的微信小程序拖拽排序列表.zip

				
			

			

				

					01-04
				

			

		

		

			
				
最简单的微信小程序拖拽排序列表 

			
		

	





	

		

			

				
					
微信小程序拖拽排序列表的示例代码

				
			

			

				

					11-19
				

			

		

		

			
				
拖拽排序列表

思路
界面分为两层：
  底层，正常列表展示，拖拽的时候不做处理（大牛直接加了动画，原谅我技艺不精，还没实现）
  顶层，movable-view组件，不长按不展示，之后长按才展示，且没有点击事件。
事件
主要监听：longpress , touchmove , touchend 三个事件
longpress
保障长按才有效，并设定许多其他值。
touchmove
滑动的时候触发
  判断是否需要滑动页面，因为 movable-area组件 滑动事件被catch掉，无法滑动；
  记录滑动经过的项，在页面【底层】设置经过项为其他样式（算是补足没有滑动动画的缺陷吧，不需要可以删除

			
		

	





	

		

			

				
					
微信小程序实现手指拖动选项排序

				
			

			

				

					12-28
				

			

		

		

			
				
本文实例为大家分享了微信小程序实现手指拖动选项排序的具体代码，供大家参考，具体内容如下
效果：

wxml：

<view>
 <view class=dileititle>手指移动选项排序</view>
 <view xss=removed id=movebox>
 <block wx:for={{list}} wx:key=index>
 <view catchtouchmove=listitemmove catchtouchend=li

			
		

	





	

		

			

				
					
react-sortable-list:可排序的列表组件

				
			

			

				

					05-14
				

			

		

		

			
				
React排序列表
 react-sortable-list是使用react和html5拖放API的可排序列表组件。
安装
yarn add react-sortable-list 
用
import SortableList from 'react-sortable-list'
import ReactDOM from 'react-dom'
import React , { Component } from 'react'
class TestComponent extends Component {
  render ( ) {
    let colors = [ 'Red' , 'Green' , 'Blue' , 'Yellow' , 'Black' , 'White' , 'Orange' ]
    return (
      < div>
        < Sort

			
		

	





	

		

			

				
					
JS前端列表排序

				
			

			

				

					06-08
				

			

		

		

			
				
JS前端列表排序，封装好的组件，解放后台数据列表的排序。

			
		

	





	

		

			

				
					
react列表拖拽排序组件

				
			

			

				

					qq_31644543的博客
				

				

					01-30
					
					1378
					
				

			

		

		

			
				
1、封装的拖拽排序组件。

			
		

	





	

		

			

				
					
微信小程序 - 最新详细实现列表长按拖拽排序示例，用户按住后拖拽上下移动实现列表交换位置排序功能效果，支持数据懒加载，自定义插槽任意HTML元素实现拖动排序组件插件，超出屏幕后触底带动滚动条滑动列表！

				
			

			

				

					王二红
				

				

					08-12
					
					4694
					
				

			

		

		

			
				
微信小程序，vue2，vue3，列表拖曳排序，列表拖拽排序，拖曳拖拽，排序，拖动，拖放，小程序如何实现列表的拖动排序功能，手指拖动选项排序，长按拖拽排序，图片拖拽排序组件，微信小程序拖拽排序，列表的上下拖拽排序，菜单menu排序，如何调用后端接口，懒加载列表怎么实现拖动排序，页面触底，上拉加载列表，滚动条到底请求数据，如何做排序，可拖拽排序，调整应用位置次序，调换位置，更改顺序，复杂数组，不流畅卡顿怎么办，怎么排序，movable-view，拖拽元素，报错，详细教程，详细运行实例代码，插件组件，最好用，放手

			
		

	





	

		

			

				
					
【微信小程序-原生开发】列表 - 拖拽排序（官方组件 movable-area 和 movable-view 的用法）

				
			

			

				

					朝阳39的博客
				

				

					03-16
					
					2566
					
				

			

		

		

			
				
实现逻辑详见代码的注释。

			
		

	





	

		

			

				
					
微信小程序使用wxs实现拖拽排序

				
			

			

				

					cyongxing的博客
				

				

					09-21
					
					935
					
				

			

		

		

			
				
使用小程序进行拖拽排序时，发现由于频繁的setData更改坐标，拖动的时候会产生很大的卡顿，然后发现使用wxs可以解决这个卡顿问题。

			
		

	





	

		

			

				
					
React实现拖动排序组件的介绍与应用

				
			

			

				

					
				

			

		

		

			
				
### 知识点：React拖动排序组件  #### 1. React 概述 React 是一个由 Facebook 开发并维护的开源前端库，用于构建用户界面，尤其是单页面应用程序。它使用声明式的方法来构建组件，使开发者可以更容易地预测其应用的...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值