uniapp 实现长按后拖拽

要实现长按后拖拽功能，需要用到uni-app提供的touch事件和动画效果。具体实现步骤如下：

1. 给需要拖拽的元素绑定touchstart、touchmove、touchend事件。

2. 在touchstart事件中记录元素的初始位置和鼠标点击位置。

3. 在touchmove事件中计算鼠标移动距离并更新元素位置。

4. 在touchend事件中判断元素是否达到拖拽条件，如果满足则添加动画效果，移动到目标位置。

下面是一个简单的示例代码：

<template>
  <view class="drag-item" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    拖拽元素
  </view>
</template>

<script>
export default {
  data() {
    return {
      startX: 0, // 元素初始位置
      startY: 0,
      currentX: 0, // 元素当前位置
      currentY: 0,
      moveX: 0, // 鼠标移动距离
      moveY: 0,
      isDragging: false // 是否正在拖拽
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = this.currentX
      this.startY = this.currentY
      this.moveX = 0
      this.moveY = 0
      this.isDragging = true
    },
    onTouchMove(e) {
      if (this.isDragging) {
        this.moveX = e.touches[0].clientX - this.startX
        this.moveY = e.touches[0].clientY - this.startY
        this.currentX = this.startX + this.moveX
        this.currentY = this.startY + this.moveY
        this.$refs.dragItem.style.transform = `translate(${this.currentX}px, ${this.currentY}px)`
      }
    },
    onTouchEnd(e) {
      this.isDragging = false
      // 判断是否达到拖拽条件
      if (this.moveX > 50 || this.moveY > 50) {
        // 添加动画效果
        this.$refs.dragItem.style.transition = 'transform 0.5s ease-out'
        this.$refs.dragItem.style.transform = 'translate(200px, 200px)'
      } else {
        this.$refs.dragItem.style.transform = `translate(${this.startX}px, ${this.startY}px)`
      }
    }
  }
}
</script>

<style>
.drag-item {
  width: 100px;
  height: 100px;
  background-color: #f00;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

在上面的代码中，我们给拖拽元素绑定了touchstart、touchmove、touchend事件，在touchstart事件中记录元素的初始位置和鼠标点击位置，在touchmove事件中计算鼠标移动距离并更新元素位置，在touchend事件中判断元素是否达到拖拽条件，如果满足则添加动画效果，移动到目标位置。