微信小程序拖拽排序列表的示例代碼
拖拽排序列表
思路
界面分為兩層:
- 底層,正常列表展示,拖拽的時候不做處理(大牛直接加了動畫,原諒我技藝不精,還沒實現(xiàn))
- 頂層,movable-view組件,不長按不展示,之后長按才展示,且沒有點擊事件。
事件
主要監(jiān)聽:longpress
, touchmove
, touchend
三個事件
longpress
保障長按才有效,并設(shè)定許多其他值。
touchmove
滑動的時候觸發(fā)
- 判斷是否需要滑動頁面,因為
movable-area
組件 滑動事件被catch掉,無法滑動; - 記錄滑動經(jīng)過的項,在頁面【底層】設(shè)置經(jīng)過項為其他樣式(算是補足沒有滑動動畫的缺陷吧,不需要可以刪除
lastTarget
字段)。
touchend
滑動結(jié)束時觸發(fā)
獲取目標(biāo)節(jié)點索引,將初始拖拽節(jié)點移動至目標(biāo)節(jié)點,其中的關(guān)鍵代碼為:
list.splice(futureIndex, 0, list.splice(dragElementIndex, 1)[0]); // 移動位置
(這行代碼參考了Vue.Draggable中一行代碼)
將其他設(shè)置置空
代碼
碼云倉庫 歡迎star、提問題。鞋鞋
示例
// 初始點擊 stratBtn(e){ let index = http.dataIndex(e)[0];//獲取當(dāng)前點擊的列表 let busArr = this.data.busArr;//獲取列表中的所有數(shù)組 let pageY = Number(e.touches[0].pageY);//初始點擊的Y點坐標(biāo) let busActObj = busArr[index];//單獨記錄當(dāng)前點擊的數(shù)據(jù) this.setData({ //保存數(shù)據(jù) sPageY:pageY, mPageY:pageY, moveSortBox:true, clickIndex:index, busActObj:busActObj }) }, // 開始移動 moveBtn(e){ let pageY = Number(e.touches[0].pageY); //記錄移動點的坐標(biāo) this.setData({ //記錄 mPageY:pageY, moveSortBox:true, }) }, // 結(jié)束點擊 endBtn(e){ let sPageY = Number(this.data.sPageY); //獲取初始點的坐標(biāo) let busArr = this.data.busArr; //獲取數(shù)組 let pageY = Number(e.changedTouches[0].pageY);//獲取結(jié)束點的坐標(biāo) let clickIndex = Number(this.data.clickIndex); //初始點的位置 let busActObj = this.data.busActObj;//獲取初始點的列表單獨數(shù)據(jù) let position = parseInt((pageY-sPageY)/90)+(clickIndex+1); //每個盒子固定高度90px (結(jié)束點-初始點/盒子高度)+(初始點的位置+1)可以得到移動的位置 busArr.splice(clickIndex,1);//刪除初始數(shù)據(jù) busArr.splice(position,0,busActObj);//在移動點重新插入數(shù)據(jù) this.setData({//保存 moveSortBox:false, busArr:busArr }) },
參考鏈接
[1] SortableJS Vue.Draggable
[2] SortableJS Sortable
[3] SortableJS演示示例 Vue.Draggable
[4] 好想再胖十斤 25行代碼解決小程序的拖拽排序
到此這篇關(guān)于微信小程序拖拽排序列表的示例代碼的文章就介紹到這了,更多相關(guān)微信小程序拖拽排序列表內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript日期對象格式化為字符串的實現(xiàn)方法
本篇文章主要是對javascript日期對象格式化為字符串的實現(xiàn)方法進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-01-01JavaScript使用performance實現(xiàn)查看內(nèi)存
這篇文章主要為大家詳細(xì)介紹了JavaScript如何使用performance實現(xiàn)查看內(nèi)存,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03js+css實現(xiàn)的圓角邊框TAB選項卡滑動門代碼分享(2款)
這篇文章主要為大家詳細(xì)介紹了兩種js+css實現(xiàn)的圓角邊框TAB選項卡滑動門效果,很實用的代碼,推薦給大家,有需要的小伙伴可以參考下2015-08-08