uni-app 实现多个数组间元素拖动,手指拖动某一个数组元素到另一个数组,改变当前和原来的数组内容
uni-app 实现多个数组间元素拖动,手指拖动某一个数组元素到另一个数组,改变当前和原来的数组内容
////////////////////////???
3 回复
那叫拖拽组件
大神,我找不到这样效果的
在 uni-app
中实现多个数组间元素的拖动功能,可以利用 Vue
的数据绑定和事件处理机制。下面是一个简单的代码示例,展示如何实现这一功能。
首先,确保你的 uni-app
项目已经创建并运行。然后,你可以按照以下步骤进行实现。
- 定义数据模型:
<script>
export default {
data() {
return {
list1: ['Item 1-1', 'Item 1-2', 'Item 1-3'],
list2: ['Item 2-1', 'Item 2-2'],
draggingItem: null,
dragStartIndex: null,
targetList: null,
targetIndex: null,
};
},
methods: {
// 开始拖动
startDrag(item, index, list) {
this.draggingItem = item;
this.dragStartIndex = index;
this.targetList = list;
},
// 拖动中(这里简单处理为直接放到目标列表末尾)
dragging(event, targetListIndex) {
if (this.draggingItem && targetListIndex !== undefined) {
this.targetIndex = targetListIndex;
}
},
// 结束拖动
endDrag() {
if (this.draggingItem && this.targetList && this.targetIndex !== null) {
const movedItem = this.targetList.splice(this.targetIndex, 0, this.draggingItem)[0];
this.targetList = this.targetList === this.list1 ? this.list1 : this.list2;
this.$set(this.targetList === this.list1 ? this.list2 : this.list1, this.dragStartIndex, movedItem);
this.draggingItem = null;
this.dragStartIndex = null;
this.targetList = null;
this.targetIndex = null;
}
},
},
};
</script>
- 模板部分:
<template>
<view>
<view v-for="(item, index) in list1" :key="index" class="item"
@touchstart="startDrag(item, index, list1)"
@touchmove.stop="dragging($event, index)"
@touchend="endDrag">
{{ item }}
</view>
<view class="separator">/</view>
<view v-for="(item, index) in list2" :key="index" class="item"
@touchstart="startDrag(item, index, list2)"
@touchmove.stop="dragging($event, index)"
@touchend="endDrag">
{{ item }}
</view>
</view>
</template>
- 样式部分(可选):
<style>
.item {
padding: 10px;
margin: 5px 0;
background-color: #f0f0f0;
border: 1px solid #ccc;
cursor: move;
}
.separator {
text-align: center;
margin: 10px 0;
}
</style>
注意:上述代码仅实现了基本的拖动逻辑,并未处理复杂的拖动位置计算和动画效果。在实际应用中,你可能需要结合 uni-app
提供的触摸事件和动画API,以实现更流畅和准确的拖动效果。此外,由于 touchmove
事件会频繁触发,你可能需要进行防抖或节流处理,以提高性能。