【Vue.draggable.next】要素をドロップしたタイミングでエラー判定を行い、ドラッグする前の状態に戻す方法を解説します。

<script setup lang="ts">
import { ref } from 'vue'
import draggable from 'vuedraggable'

// ドラッグ＆ドロップができるリスト①
const peopleData = ref([
  { name: 'tanaka', id: 0 },
  { name: 'suzuki', id: 1 },
  { name: 'sato', id: 2 },
  { name: 'mori', id: 3 },
  { name: 'takago', id: 4 }
])

// ドラッグ＆ドロップができるリスト②
const peopleData2 = ref([{ name: 'suzuki', id: 1 }])

// エラーメッセージ用の定数
const validMessage = ref('')

// ドラッグ前の状態を保存する変数
let originalData1 = []
let originalData2 = []

/**
 * ドラッグ時にリストの状態を保存
 */
const onDragStart = () => {
  validMessage.value = ''
  originalData1 = JSON.parse(JSON.stringify(peopleData.value))
  originalData2 = JSON.parse(JSON.stringify(peopleData2.value))
}

/**
 *
 * @param evt ドロップした要素
 * ドロップ後にドロップした要素のエラーチェックを行う
 */
const onDragEnd = (evt) => {
  const targetList = evt.to.children
  const newItem = evt.item.innerText.split('. ')[1]
  const isDuplicate =
    Array.from(targetList).filter((item) => item.innerText.split('. ')[1] === newItem).length > 1

  // エラーがあった場合、元の状態に戻す
  if (isDuplicate) {
    validMessage.value = '同じ名前のアイテムはドラッグできません。'
    peopleData.value = originalData1
    peopleData2.value = originalData2
  }
}
</script>

<template>
  <v-container>
    <h1>ドラッグ＆ドロップテスト</h1>
    <v-row>
      <v-col>
        <v-list :border="true" class="pa-8">
          <draggable
            v-model="peopleData"
            group="people"
            item-key="id"
            ghostClass="bg-red"
            :animation="300"
            @start="onDragStart"
            @end="onDragEnd"
          >
            <template #item="{ element: element2 }">
              <v-list-item :border="true" class="pa-8 mt-4">
                {{ element2.id }}. {{ element2.name }}
              </v-list-item>
            </template>
          </draggable>
        </v-list>
        <div>peopleDataデータの中身：{{ peopleData }}</div>
        <p class="error">{{ validMessage }}</p>
      </v-col>

      <v-col>
        <v-list :border="true" class="pa-8">
          <draggable
            v-model="peopleData2"
            group="people"
            item-key="id"
            ghostClass="bg-blue"
            :animation="300"
            @start="onDragStart"
            @end="onDragEnd"
          >
            <template #item="{ element: element2 }">
              <v-list-item :border="true" class="pa-8 mt-4">
                {{ element2.id }}. {{ element2.name }}
              </v-list-item>
            </template>
          </draggable>
        </v-list>
        <div>peopleDataの中身：{{ peopleData2 }}</div>
        <p class="error">{{ validMessage }}</p>
      </v-col>
    </v-row>
  </v-container>
</template>

<style scoped>
.error {
  color: #e53935;
}
.bg-red {
  background-color: #e53935;
}
.bg-blue {
  background-color: #35a4e5;
}
</style>