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

更新時間：2020年07月08日 09:25:58 作者：Simorel

這篇文章主要介紹了微信小程序拖拽排序列表的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

拖拽排序列表

思路

界面分為兩層：

底層，正常列表展示，拖拽的時候不做處理（大牛直接加了動畫，原諒我技藝不精，還沒實現）
頂層，movable-view組件，不長按不展示，之后長按才展示，且沒有點擊事件。

事件

主要監(jiān)聽：longpress , touchmove , touchend 三個事件

longpress

保障長按才有效，并設定許多其他值。

touchmove

滑動的時候觸發(fā)

判斷是否需要滑動頁面，因為 movable-area組件滑動事件被catch掉，無法滑動；
記錄滑動經過的項，在頁面【底層】設置經過項為其他樣式（算是補足沒有滑動動畫的缺陷吧，不需要可以刪除 lastTarget字段）。

touchend

滑動結束時觸發(fā)

獲取目標節(jié)點索引，將初始拖拽節(jié)點移動至目標節(jié)點，其中的關鍵代碼為：

list.splice(futureIndex, 0, list.splice(dragElementIndex, 1)[0]); // 移動位置

(這行代碼參考了Vue.Draggable中一行代碼)

將其他設置置空

代碼

代碼片段

碼云倉庫歡迎star、提問題。鞋鞋

示例

// 初始點擊
  stratBtn(e){
    let index = http.dataIndex(e)[0];//獲取當前點擊的列表
    let busArr = this.data.busArr;//獲取列表中的所有數組
    let pageY = Number(e.touches[0].pageY);//初始點擊的Y點坐標
    let busActObj = busArr[index];//單獨記錄當前點擊的數據
    this.setData({ //保存數據
      sPageY:pageY,
      mPageY:pageY,
      moveSortBox:true,
      clickIndex:index,
      busActObj:busActObj
    })
  },
  // 開始移動
  moveBtn(e){
    let pageY = Number(e.touches[0].pageY); //記錄移動點的坐標
    this.setData({ //記錄
      mPageY:pageY,
      moveSortBox:true,
    })
  },
  // 結束點擊
  endBtn(e){
    let sPageY = Number(this.data.sPageY); //獲取初始點的坐標
    let busArr = this.data.busArr; //獲取數組
    let pageY = Number(e.changedTouches[0].pageY);//獲取結束點的坐標
    let clickIndex = Number(this.data.clickIndex); //初始點的位置
    let busActObj = this.data.busActObj;//獲取初始點的列表單獨數據
    let position = parseInt((pageY-sPageY)/90)+(clickIndex+1); //每個盒子固定高度90px (結束點-初始點/盒子高度)+(初始點的位置+1)可以得到移動的位置
    busArr.splice(clickIndex,1);//刪除初始數據
    busArr.splice(position,0,busActObj);//在移動點重新插入數據
    this.setData({//保存
      moveSortBox:false,
      busArr:busArr
    })
  },

參考鏈接

[1] SortableJS Vue.Draggable

[2] SortableJS Sortable

[3] SortableJS演示示例 Vue.Draggable

[4] 好想再胖十斤 25行代碼解決小程序的拖拽排序

到此這篇關于微信小程序拖拽排序列表的示例代碼的文章就介紹到這了,更多相關微信小程序拖拽排序列表內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: