Vue3+TS realizes that multiple buttons can be dragged to their corresponding positions, and can only be dragged in order

The specific implementation code is as follows:

<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>