Schritte zur Verwendung des mobilen Drag-and-Drop-Plug-Ins vueDraggable von vue3

Offizielle Website-Adresse des Plug-ins:

Vor kurzem bestand die Notwendigkeit, Benutzern eine Drag-and-Drop-Listenfunktion bereitzustellen, daher wurde ein Drag-and-Drop-Plug-In verwendet. Baidu fand heraus, dass sie alle das vuedraggable Plug-In eingeführt hatten, aber dieses Plug-In wird bei der Verwendung in vue3 unerklärliche Fehler verursachen, selbst laut der offiziellen Website kann die Verwendung von v3 ebenfalls nicht behoben werden,

Anwendungsbeispiel:

    <draggable
      class="wrapper"
      v-model="list"
      @start="drag = true"
      @end="drag = false"
      item-key="index"
    >
      <template #item="{ element }">
        <div class="item">
          <p>{
   
   { element }}</p>
        </div>
      </template>
    </draggable>

Später habe ich ein Vue-Draggable-Next -Plug-In gefunden, das für Version 3 geeignet ist. Die Verwendung ist die gleiche wie bei der Version 2 des Vue-Draggable-Plug-Ins. Es besteht fast keine Notwendigkeit, etwas zu ändern. Geben Sie einfach den Code ein:

Chinesische Dokumentadresse: vue.draggable.next Chinesisches Dokument – ​​itxst.com

npm i vue-draggable-next  -S

<template>
  <div class="flex m-10">
    <draggable class="dragArea list-group w-full" :list="list" @change="log">
      <div
        class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center"
        v-for="element in list"
        :key="element.name"
      >
        {
   
   { element.name }}
      </div>
    </draggable>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { VueDraggableNext } from 'vue-draggable-next'
  export default defineComponent({
    components: {
      draggable: VueDraggableNext,
    },
    data() {
      return {
        enabled: true,
        list: [
          { name: 'John', id: 1 },
          { name: 'Joao', id: 2 },
          { name: 'Jean', id: 3 },
          { name: 'Gerard', id: 4 },
        ],
        dragging: false,
      }
    },
    methods: {
      log(event) {
        console.log(event)
      },
    },
  })
</script>