uni-app 实现多个数组间元素拖动,手指拖动某一个数组元素到另一个数组,改变当前和原来的数组内容

发布于 1周前 作者 ionicwang 来自 Uni-App

uni-app 实现多个数组间元素拖动,手指拖动某一个数组元素到另一个数组,改变当前和原来的数组内容

////////////////////////???

3 回复

那叫拖拽组件


大神,我找不到这样效果的

uni-app 中实现多个数组间元素的拖动功能,可以利用 Vue 的数据绑定和事件处理机制。下面是一个简单的代码示例,展示如何实现这一功能。

首先,确保你的 uni-app 项目已经创建并运行。然后,你可以按照以下步骤进行实现。

  1. 定义数据模型
<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>
  1. 模板部分
<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>
  1. 样式部分(可选):
<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 事件会频繁触发,你可能需要进行防抖或节流处理,以提高性能。

回到顶部