Vue3+TS实现多个按钮分别拖到各自对应的位置，并只能按照顺序拖拽

最新推荐文章于 2024-02-23 11:00:01 发布

芋圆不想圆

最新推荐文章于 2024-02-23 11:00:01 发布

阅读量374

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_52900946/article/details/129867771

版权

具体实现代码如下：

<template>
  <div>
   /**
     * 三个可以拖动的按钮
     */
    <div class="item" draggable="true" @dragstart="dragStart({ id: 'item1', targetId: 'target1' })">Item 1</div>
    <div class="item" draggable="true" @dragstart="dragStart({ id: 'item2', targetId: 'target2' })">Item 2</div>
    <div class="item" draggable="true" @dragstart="dragStart({ id: 'item3', targetId: 'target3' })">Item 3</div>
    /**
     * 三个可以拖动的按钮分别对应的目标位置
     */
    <div class="target" id="target1" @drop="drop({ id: 'target1', allowedItems: ['item1'] })" @dragover.prevent="dragOver">Target 1</div>
    <div class="target" id="target2" @drop="drop({ id: 'target2', allowedItems: ['item2'] })" @dragover.prevent="dragOver">Target 2</div>
    <div class="target" id="target3" @drop="drop({ id: 'target3', allowedItems: ['item3'] })" @dragover.prevent="dragOver">Target 3</div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';

interface DraggedItem {
  id: string;
  targetId: string;
}

interface Target {
  id: string;
  allowedItems: string[];
}

export default defineComponent({
  setup() {
    const draggedItem = ref<DraggedItem | null>(null);
    const allowedItems = ['item1', 'item2', 'item3'];
    // 定义当前拖拽的索引
    let currentDragIndex = 0;

    const dragStart = (item: DraggedItem) => {
      if (item.id === allowedItems[currentDragIndex]) {
        draggedItem.value = item;
      } else {
        console.log(`Item ${item.id} 拖拽顺序不正确`);
      }
    };

    const dragOver = (event: DragEvent) => {
      event.preventDefault();
      if(event.dataTransfer){
        event.dataTransfer.dropEffect = 'move';
      }
    };

    const drop = (target: Target) => {
      if (draggedItem.value?.id === allowedItems[currentDragIndex]) {
        const allowedItems = target.allowedItems;

        // 检查目标是否允许拖拽的项目
        if (allowedItems.includes(draggedItem.value?.id || '')) {
          console.log(`Item ${draggedItem.value?.id} 被拖拽到 Target ${target.id}`);
          draggedItem.value = null;
          currentDragIndex++;
        } else {
          console.log(`Item ${draggedItem.value?.id} 不能被拖拽到 Target ${target.id}`);
        }
      }
    };

    return {
      draggedItem,
      dragStart,
      dragOver,
      drop,
    };
  },
});
</script>
<style scoped>
.target {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
}
</style>