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

index.wxml

<movable-area style="width: 100%;height:{ 
        { 
        (dataList.length)*60}}px;">
  <movable-view class="itemBox" style="z-index:{ 
        { 
        index == moveId ? 2 : 1}}" wx:for="{
     
     {dataList}}" wx:key="index" y="{
     
     {item.y}}" direction="all" bind:change="moving" bind:touchend='moved' data-moveid="{
     
     {index}}">
    {
   
   {item.content}}
  </movable-view>
</movable-area>

index.css

.itemBox {
    
    
  background: white;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0rpx 20rpx;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .4);
}

index.js

实现逻辑详见代码的注释

Page({
    
    
  data: {
    
    
    // 列表数据
    dataList: [{
    
    
        content: "苹果"
      },
      {
    
    
        content: "香蕉"
      },
      {
    
    
        content: "梨子"
      },
    ],
    // 移动块的id
    moveId: null,
    // 最终停止的位置
    endY: 0,
  },
  onLoad() {
    
    
    this.init(this.data.dataList)
  },
  // 重置列表顺序
  init(dataList) {
    
    
    // 列表项高度
    const ITEM_HEIGHT = 40
    // 列表项上外边距
    const ITEM_MARGIN_TOP = 14
    let newDataList = dataList.map((item, index) => {
    
    
      item.id = index
      // 重置单项的y坐标(组件默认是绝对定位 left:0  top:0 )
      item.y = (ITEM_HEIGHT + ITEM_MARGIN_TOP) * index + ITEM_MARGIN_TOP
      return item
    })

    this.setData({
    
    
      dataList: newDataList
    })
  },
  // 移动中-获取移动元素的id,实时获取移动元素的y坐标
  moving(e) {
    
    
    this.setData({
    
    
      moveId: e.currentTarget.dataset.moveid,
      endY: e.detail.y,
    })
  },
  // 移动后
  moved() {
    
    
    let {
    
    
      dataList,
      moveId,
      endY
    } = this.data
    let newDataList = JSON.parse(JSON.stringify(dataList))
    newDataList[moveId].y = endY
    newDataList = newDataList.sort((a, b) => a.y - b.y)
    this.init(newDataList)
  }
})

注意事项

1. 需要根据各项的内容，调整或动态生成 ITEM_HEIGHT 值
2. 因 movable-view 是绝对定位，不方便实现水平居中，所以设定 width: 100%; 占满宽度