当前位置：首页 > uni-app

uniapp拖拽填空

2026-02-05 22:35:25uni-app

uniapp拖拽填空实现方法

使用HTML5拖拽API

在uniapp中可以通过HTML5原生拖拽API实现拖拽填空功能。需要监听dragstart、dragover和drop事件。

<template>
  <view>
    <!-- 可拖拽元素 -->
    <view 
      v-for="(item, index) in items" 
      :key="index"
      draggable="true"
      @dragstart="dragStart(index)"
    >
      {{ item.text }}
    </view>

    <!-- 填空区域 -->
    <view 
      class="drop-area"
      @dragover.prevent
      @drop="handleDrop"
    >
      拖拽到这里
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '选项1' },
        { text: '选项2' },
        { text: '选项3' }
      ],
      draggedIndex: null
    }
  },
  methods: {
    dragStart(index) {
      this.draggedIndex = index
    },
    handleDrop() {
      if (this.draggedIndex !== null) {
        // 处理拖拽后的逻辑
        console.log('拖拽了:', this.items[this.draggedIndex].text)
      }
    }
  }
}
</script>

使用第三方插件

uniapp社区提供了多种拖拽组件，如uni-drag、vue-draggable等。这些插件封装了拖拽逻辑，使用更方便。

安装vue-draggable:

npm install vuedraggable

使用示例:

<template>
  <view>
    <draggable 
      v-model="items"
      @end="onDragEnd"
    >
      <view v-for="item in items" :key="item.id">
        {{ item.text }}
      </view>
    </draggable>
  </view>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  data() {
    return {
      items: [
        { id: 1, text: '选项1' },
        { id: 2, text: '选项2' },
        { id: 3, text: '选项3' }
      ]
    }
  },
  methods: {
    onDragEnd() {
      console.log('拖拽结束', this.items)
    }
  }
}
</script>

自定义拖拽实现

对于更复杂的需求，可以结合touch事件实现自定义拖拽效果。通过监听touchstart、touchmove和touchend事件，计算元素位置变化。

<template>
  <view>
    <view 
      v-for="(item, index) in items"
      :key="index"
      :style="{ transform: `translate(${item.x}px, ${item.y}px)` }"
      @touchstart="startDrag(index, $event)"
      @touchmove="onDrag($event, index)"
      @touchend="endDrag"
      class="draggable-item"
    >
      {{ item.text }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { text: '选项1', x: 0, y: 0 },
        { text: '选项2', x: 0, y: 0 },
        { text: '选项3', x: 0, y: 0 }
      ],
      dragStartPos: { x: 0, y: 0 },
      currentDragIndex: null
    }
  },
  methods: {
    startDrag(index, e) {
      this.currentDragIndex = index
      this.dragStartPos = {
        x: e.touches[0].clientX - this.items[index].x,
        y: e.touches[0].clientY - this.items[index].y
      }
    },
    onDrag(e, index) {
      if (this.currentDragIndex !== null) {
        this.$set(this.items, index, {
          ...this.items[index],
          x: e.touches[0].clientX - this.dragStartPos.x,
          y: e.touches[0].clientY - this.dragStartPos.y
        })
      }
    },
    endDrag() {
      this.currentDragIndex = null
    }
  }
}
</script>

填空区域检测

实现拖拽填空功能时，需要检测元素是否被拖拽到目标区域。可以通过计算元素位置与目标区域的位置关系来判断。

methods: {
  checkDropZone(position) {
    const dropZone = uni.createSelectorQuery().select('.drop-area')
    dropZone.boundingClientRect(data => {
      if (position.x > data.left && 
          position.x < data.right &&
          position.y > data.top && 
          position.y < data.bottom) {
        console.log('元素已放入填空区域')
      }
    }).exec()
  }
}