微信小程序通过 movable-area 做一个与vuedraggable相似的上下拖动排序控件

因为只是做个小案例我就直接代码写page页面里了其实很简单组件稍微改一下就好了
wxss


/* 设置movable-area的宽度 */
.area{width: 100%;
}/* a b c 每条元素的样式 */
movable-view {width: 100%;background-color: red;height: 40px;line-height: 40px;color: #FFFFFF;text-align: center;
}

都是些基本样式也没什么好讲的但是这里我js中用了很多px的计算代码大家最好还是看清楚再改不然 rpx和px对不上问题还是很大的

js代码

Page({data: {//排序元素集合list: [{ text: 'a', id: 0, top: 0 },{ text: 'b', id: 1, top: 0 },{ text: 'c', id: 2, top: 0 }],//整个元素的高度totalHeight: 0,//控制协助movable-area 元素重新渲染reload: true},onLoad: function () {//调用初始化函数this.initialization();},//将指定元素 在数组中后移一个下标moveElementBackward(arr, index) {if((index + 1) === arr.length) {return arr}const element = arr[index];arr.splice(index, 1);arr.splice(index + 1, 0, element);return arr;},//将指定元素 在数组中前移一个下标moveIndexForward(arr, index) {if(index == 0){return arr}// 创建一个空数组 存储更改后的结构var newArr = Array.from(arr);// 获取要前移的两个下标的值var value1 = newArr[index];var value2 = newArr[index - 1];// 交换两个元素的位置newArr[index] = value2;newArr[index - 1] = value1;return newArr;},initialization() {let list = this.data.listif(!list.length) {return}list = list.map((item,index) => {item.top = (index*50)return item})this.setData({list: list,totalHeight: list.length*50,reload: true})},handleTouchEnd() {//先将reload 改为false 让movable-area wxif不生效 强制移除this.setData({reload: false})//等待想试试数据生效修改后 调用初始化函数wx.nextTick(() => {this.initialization();})},//当用户拖动某块元素时触发handleTouchMove: function (event) {//获取到当前用拖动的是第几个元素const index = event.currentTarget.dataset.index//获取到 y 轴  就是 上下拖动的距离const currentY = event.touches[0].clientY//定义一个list 接受tata中的listconst list = this.data.list// 通过index 从list 集合中找到当前元素 对比 top和拖动的高度if(currentY > (list[index].top+70)) {// 如果比起之前  乡下了  70还要多 直接 调用 向后移动一个下标的函数const newArray = this.moveElementBackward(list, index);//调用setData 修改函数 修改 data中的 list 换成我们新处理好的函数this.setData({list: newArray})//等待  响应式数据修改并生效后再执行的nextTickwx.nextTick(() => {//调用初始化函数this.initialization();})}else if(currentY < (list[index].top-20)) {const newArray = this.moveIndexForward(list, index);this.setData({list: newArray})//等待  响应式数据修改并生效后再执行的nextTickwx.nextTick(() => {//调用初始化函数this.initialization();})}}
});

我的注释还是写的非常认真的大家可以好好读一读
然后 wxml 没什么特别的就是渲染一下list

<movable-areaclass = "area"style = "height: {{totalHeight}}px;"wx:if="{{ reload }}"
><movable-viewwx:for="{{list}}"wx:key="id"data-index="{{index}}"y="{{item.top}}"direction="all"bindtouchmove="handleTouchMove"bindtouchend="handleTouchEnd">{{item.text}}</movable-view>
</movable-area>