uni-app使用movable-area 实现数据的拖拽排序功能

文档地址

template部分

<movable-area :style="getAreaStyle"><movable-view class="table-row" v-for="v,i in move.list":key="v.id":y="v.y"@change="handle_moving"direction="vertical"@touchstart="handle_dragstart(i,v)" @touchend="handle_dragend(i,v)"@longpress="handleLongpress(v)" :disabled="move.disabled"><view class="table-cell">{{i+1}}</view><view class="table-cell">选择物料</view></movable-view>
</movable-area>

.table-cell,.table-row{height:50rpx;
}
.table-row{width:100%;display: flex;
}
.table-cell{width:200rpx;
}

 注意使用movable-area时需要设置高度和宽度 否则默认10

js部分

const move = reactive({list:[],disabled: true,activeIndex: -1,moveToIndex: -1,oldIndex: -1,tempDragInfo: {y: ''},cloneList: [],longpress: true,})// 获取位置const getPosition_y = (index) => {return index * 25}const getAreaStyle = computed(() => {return {width: '100%',height: move.list.length * 25 + 'px'}})// 初始化列表const initList = (list = []) => {const newList = JSON.parse(JSON.stringify(list));move.list = newList.map((item, index) => {return {...item,y: getPosition_y(index)}})move.cloneList = JSON.parse(JSON.stringify(move.list));}// 开始拖拽const handle_dragstart = (i,v) => {if(!v.id){return false;}move.activeIndex = i;move.oldIndex = i;}// 拖拽结束const handle_dragend = (i,v) => {if(!v.id){return false;}if (move.disabled) return;if (move.moveToIndex != -1 && move.activeIndex != -1 && move.activeIndex != move.moveToIndex) {move.cloneList.splice(move.moveToIndex, 0, ...move.cloneList.splice(move.activeIndex, 1));} else {move.list[move.activeIndex]['y'] = move.tempDragInfo.y;}initList(move.cloneList)move.activeIndex = -1;move.oldIndex = -1;move.moveToIndex = -1;move.disabled = true;}// 移动const handle_moving = (e) => {console.log({e})if (e.detail.source !== 'touch') return;let y = e.detail.y;move.tempDragInfo.y = y;const currentY = Math.floor((y + 12.5) / 25)move.moveToIndex = Math.min(currentY, move.list.length - 1);if (move.oldIndex != move.moveToIndex && move.oldIndex != -1 && move.moveToIndex != -1) {const newList = JSON.parse(JSON.stringify(move.cloneList));let splicItem = newList.splice(move.activeIndex, 1)[0]newList.splice(move.moveToIndex, 0, splicItem);move.list.forEach((item, index) => {if (index != move.activeIndex) {const itemIndex = newList.findIndex(val => val?.id === item?.id);item['y'] = getPosition_y(itemIndex);}});move.oldIndex = move.moveToIndex;}}const handleLongpress = (v) => {if(!v.id){return false}move.disabled = false;}