uni-app 小程序实现列表拖拽排序
一、引入组件
<template>
<view>
<drag-and-drop-sort-B style="display: flex; justify-content: center;" :controlsList="controlsList" :containerSize="{width: '200px', height: '100vh'}" :controlsSize="{width: 200, height: 40}" />
</view>
</template>
<script>
export default {
data() {
return {
controlsList: ['#fc5531', '#1481f9', '#1ab519', '#32c0eb', '#e73e60', '#a663c2', '#b26801', '#1c2e6c', '#cdccc8'],
}
},
};
</script>
<style scoped lang="scss">
</style>
组件内的实现
<template>
<view class="drag-and-drop-sort-B" :style="[containerSize]">
<template v-if="controlsPositionArray.length !== 0">
<view v-for="(item, index) in controlsArray" :key="index" class="_item"
:style="{'background': item, 'transition': (curretnControlsIndex === index ? 'initial' : '.3s'), 'z-index': (curretnControlsIndex === index ? 1 : 0), 'width': controlsSize.width + 'px', 'height': controlsSize.height + 'px', 'top': controlsPositionArray[index].top + 'px', 'left': controlsPositionArray[index].left + 'px'}">
<view @touchstart="handleTouchstart($event, index)" @touchmove="handleTouchmove" @touchend="handleTouchend" :style="{'background': item}" style="width: 100%; height: 100%;">
<view style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;">
{{index + 1}}
</view>
</view>
</view>
</template>
</view>
</template>
<script>
export default {
name: "drag-and-drop-sort-B",
props: {
containerSize: {
type: Object,
default: () => ({ wdith: '100vw', height: '100vh' }),
},
controlsSize: {
type: Object,
default: () => ({ width: 0, height: 0 }),
},
controlsList: {
type: Array,
default: () => [],
},
},
data() {
return {
controlsArray: [],
maxWidthCount: 1,
margin: {
margin_x: 0,
margin_y: 10,
},
recordInitControlsPoisitonList: [],
controlsPositionArray: [],
recordPosition: {
x: 0,
y: 0,
},
recordControlsPositionItem: {},
curretnControlsIndex: -1,
};
},
mounted() {
this.systemInfo = uni.getSystemInfoSync();
this.controlsArray = this.controlsList;
this.controlsPositionArray = this.initControlsPosition();
},
methods: {
initControlsPosition() {
let tempArray = [];
for(let i = 0, j = 0; i < this.controlsList.length; i++, j++) {
tempArray[i] = {
left: this.margin.margin_x,
top: j * (this.controlsSize.height + this.margin.margin_y) + this.margin.margin_y,
}
}
this.recordInitControlsPoisitonList = [...tempArray];
return tempArray;
},
handleTouchmove(event) {
const { pageX, pageY } = event.touches[0];
this.controlsPositionArray[this.curretnControlsIndex] = {
left: this.controlsPositionArray[this.curretnControlsIndex].left + (pageX - this.recordPosition.x),
top: this.controlsPositionArray[this.curretnControlsIndex].top + (pageY - this.recordPosition.y),
}
this.recordPosition = { x: pageX, y: pageY };
if(this.curretnControlsIndex !== this.controlsPositionArray.length - 1 && this.controlsPositionArray[this.curretnControlsIndex].top > this.controlsPositionArray[this.curretnControlsIndex + 1].top) {
this._handleChangeControlsPosition(0, this.curretnControlsIndex + 1);
}
else if(this.curretnControlsIndex !== 0 && this.controlsPositionArray[this.curretnControlsIndex].top < this.controlsPositionArray[this.curretnControlsIndex - 1].top) {
this._handleChangeControlsPosition(0, this.curretnControlsIndex - 1);
}
},
handleTouchstart(event, index) {
const { pageX, pageY } = event.touches[0];
this.curretnControlsIndex = index;
this.recordPosition = { x: pageX, y: pageY };
this.recordControlsPositionItem = this.controlsPositionArray[index];
},
handleTouchend(event) {
this.controlsPositionArray[this.curretnControlsIndex] = this.recordInitControlsPoisitonList[this.curretnControlsIndex];
this.curretnControlsIndex = -1;
},
_handleChangeControlsPosition(type, index) {
let tempControls = this.controlsArray[this.curretnControlsIndex];
this.controlsArray[this.curretnControlsIndex] = this.controlsArray[index];
this.controlsArray[index] = tempControls;
this.controlsPositionArray[index] = this.controlsPositionArray[this.curretnControlsIndex];
this.controlsPositionArray[this.curretnControlsIndex] = this.recordControlsPositionItem;
this.curretnControlsIndex = index;
this.recordControlsPositionItem = this.recordInitControlsPoisitonList[this.curretnControlsIndex];
},
}
}
</script>
<style scoped lang="scss">
.drag-and-drop-sort-B {
position: relative;
._item {
position: absolute;
}
}
</style>
tips: 可以根据需求在某个时机自行执行$emit把数据返回出去 !