Uniapp实现拖拽排序与拖拽操作的方法

在Uniapp开发中，实现拖拽排序与拖拽操作能显著提升用户体验，让界面交互更加流畅和便捷。以下将详细介绍其实现方法。

对于拖拽排序，我们可以借助@vueuse/core库中的useSortable函数来实现。确保项目中安装了该库。在需要实现拖拽排序的页面组件中引入useSortable。接着，定义一个数组来存储需要排序的元素数据。

例如：

<template>
  <view class="sortable-list">
    <view v-for="(item, index) in sortableList" :key="index" :ref="`itemRef${index}`">{{ item }}</view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useSortable } from '@vueuse/core';

const sortableList = ref(['苹果', '香蕉', '橙子']);
const itemRefs = [];

const { sort } = useSortable({
  list: sortableList,
  getContainer: () => document.body,
  getItems: () => itemRefs.map(ref => ref.value),
  onSortEnd: () => {
    // 排序结束后可以进行数据更新操作
    console.log('排序完成', sortableList.value);
  }
});

for (let i = 0; i < sortableList.value.length; i++) {
  itemRefs.push(ref(null));
}
</script>

上述代码中，useSortable函数配置了拖拽排序的相关参数。list是需要排序的数据列表，getContainer指定了拖拽操作的容器，getItems获取每个可拖拽的元素，onSortEnd则在排序结束时触发相应操作。

而对于一般的拖拽操作，我们可以通过监听触摸事件来实现。在template中为需要拖拽的元素绑定触摸事件，如@touchstart、@touchmove和@touchend。

<template>
  <view class="draggable-item" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></view>
</template>

<script setup>
import { ref } from 'vue';

const dragData = ref({
  startX: 0,
  startY: 0,
  offsetX: 0,
  offsetY: 0
});

const onTouchStart = (e) => {
  dragData.value.startX = e.touches[0].clientX;
  dragData.value.startY = e.touches[0].clientY;
  dragData.value.offsetX = e.target.offsetLeft;
  dragData.value.offsetY = e.target.offsetTop;
};

const onTouchMove = (e) => {
  e.preventDefault();
  const dx = e.touches[0].clientX - dragData.value.startX;
  const dy = e.touches[0].clientY - dragData.value.startY;
  const left = dragData.value.offsetX + dx;
  const top = dragData.value.offsetY + dy;
  // 更新元素的位置样式
  e.target.style.left = left + 'px';
  e.target.style.top = top + 'px';
};

const onTouchEnd = () => {
  // 拖拽结束后的操作
};
</script>

通过上述代码，我们能够实现一个简单的元素拖拽操作。通过巧妙运用这些方法，开发者可以在Uniapp项目中轻松打造出交互性强的拖拽排序和拖拽操作功能。