微信小程序 -- 基於 movable-view 實現拖拽排序

微信小程序 -- 基於 movable-view 實現拖拽排序

項目基於colorui樣式組件 ColorUI組件庫 (color-ui.com)

1.實現效果

2. 設計思路

1. movable-view 綁定塊移動事件的 塊ID ,塊移動的座標
2. 移動結束後觸發moveEnd事件，根據Y座標對對象數組進行排序
3. 根據排序結果重置塊位置

3.實現代碼

代碼已經進行了最簡化處理

圖中效果實現需引入colorui的main.wxss樣式部分。

wxml

<movable-area class="padding text-center bg-grey" style="width:100%;height:500px;" >
  <movable-view class="radius shadow bg-white" style="width:80%;height:80px;z-index:{{index==moveId?2:1}}" wx:for="{{tabList}}" wx:key="index" x="{{item.x}}" y="{{item.y}}" direction="all"
    bindchange="moveStatus" bindtouchend='moveEnd' data-moveid="{{index}}">
    {{item.name}}</movable-view>
</movable-area>

js

var compare = function (obj1, obj2) {
  var val1 = obj1.y;
  var val2 = obj2.y;
  if (val1 < val2) {
      return -1;
  } else if (val1 >= val2) {
      return 1;
  } else {
      return 0;
  }            
}
Page({

  /**
   * 頁面的初始數據
   */
  data: {
    branchid:'',
    appdocid:'',
    tabList:[
      {
        name:'十步殺一人'
      },
      {
        name:'千里不留行'
      },
      {
        name:'事了拂衣去'
      },
      {
        name:'深藏身與名'
      }
    ],
    //移動的是哪個元素塊
    moveId:null,
    //最終停止的位置
    endX:0,
    endY:0
  },
  initMove(){
    let tabList = this.data.tabList;
    var tarr = []
    tabList.forEach(function(ele,index){
      let obj = ele
      obj.id = index
      obj.x = 30
      obj.y = 100*index +20
      tarr.push(obj)
    })
    console.log(tarr)
    this.setData({
      tabList:tarr
    })
  },
  moveEnd(e){
    console.log(e)
    var that = this;
    that.setData({
      ["tabList["+that.data.moveId+"].x"]:that.data.endX,
      ["tabList["+that.data.moveId+"].y"]:that.data.endY
    },()=>{
      let tabList = this.data.tabList;
      tabList = tabList.sort(compare);
      that.setData({
        tabList
      },()=>{
        setTimeout(function(){
          that.initMove();
        },500)
        
      })
    })
   
    
    //計算位置
  },
  moveStatus(e){
    // console.log(e)
    //移動的塊ID
    var moveid = e.currentTarget.dataset.moveid;
    //最終座標
    let x = e.detail.x 
    let y = e.detail.y 
    this.setData({
      moveId:moveid,
      endX:x,
      endY:y
    })
  },
  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
  
  },
  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {
    this.initMove();
  }
})

4.參考文檔

• movable-view | 微信開放文檔 (qq.com)