微信小程式 -- 基於 movable-view 實現拖拽排序
阿新 • • 發佈:2021-06-16
微信小程式 -- 基於 movable-view 實現拖拽排序
專案基於
colorui
樣式元件 ColorUI元件庫 (color-ui.com)
1.實現效果
2. 設計思路
- movable-view 繫結塊移動事件的 塊
ID
,塊移動的座標 - 移動結束後觸發
moveEnd
事件,根據Y
座標對物件陣列進行排序 - 根據排序結果重置塊位置
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(); } })