更新时间：2022-12-21 10:47:04贡献者收藏我的文档设置返回文档场景分析在小程序产品设计上，有许多对列表需要拖拽的情景，如：收藏夹排序，文章列表排序等，用户通过拖拽实现自定义排序，方便用户操作。实现思路利用小程序提供的 movable-area 可移动视图区域 实现上下拖拽功能，根据手指移动距离计算出拖动到的位置，拖拽过程中实时更新列表 list 达到拖拽的效果。说明：由于社区代码量限制，完整代码请查看下方。布局●整体为 scroll-view，scroll-view 内嵌一个 list 列表。●列表布局，列表 item 左中右布局。●将一个 view 使用 position 属性透明覆盖到列表上拖拽按钮上面（即下方蓝色区域）。●隐藏 movable-area，用户拖拽时显示。拖拽逻辑实现●监听拖拽按钮的触摸开始，移动，结束事件。●触摸开始，记录触摸初始位置，获取到当前 item 信息并显示到滑块 movable-area 上。●触摸移动，计算当前位置与初始位置竖直方向的距离，使滑块移动相同的距离；计算移动到哪个 item 上，修改此 item 为移动 item 信息并且添加颜色加深样式，使用户能直观感受。●触摸结束，取消颜色加深效果。删除逻辑实现●获取到用户点击删除按钮的行数索引。●列表 list 中删除该索引。●使用 setdata 同步到 view。置顶逻辑实现●获取到用户点击删除按钮的行数索引，并获取 item。●列表 list 中删除该索引。●列表首项添加刚删除的 item。●使用 setdata 同步到 view。完整的项目代码：
