VueJS 3 可拖动问题

Question

我正在使用带有“vue-draggable-next”的 VueJS 3：“^2.1.1”。

当我尝试拖动时没有任何反应。

我在 HTML 中看到了这个：

<div class="flex m-10" data-v-52c58f0f="">

<draggable list="[object Object],[object Object],[object Object],[object Object]" data-v-52c58f0f="">
 <div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">John</div> 
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Joao</div> 
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Jean</div>
<div class="list-group-item bg-gray-300 m-1 p-3 rounded-md text-center" data-v-52c58f0f="">Gerard</div>`
 </draggable>


</div>

当我实现这样的代码时：

import { VueDraggableNext } from "vue-draggable-next";

components: { draggable: VueDraggableNext },

和

list: [

      { name: 'John', id: 1 },
      { name: 'Joao', id: 2 },
      { name: 'Jean', id: 3 },
      { name: 'Gerard', id: 4 },
  ],

我是我已经尝试过的模板：

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

还有这个：

   <draggable
        :list="list"
        :disabled="!enabled"
        item-key="name"
        class="list-group"
        ghost-class="ghost"
        :move="checkMove"
        @start="dragging = true"
        @end="dragging = false"
      >
        <template #item="{ element }">
          <div class="list-group-item" :class="{ 'not-draggable': !enabled }">
            {{ element.name }}
          </div>
        </template>
      </draggable>

在我使用的情况下

<template #item="{ element }">

没有显示任何内容，在另一种情况下，没有任何内容是可拖动的。

组件已加载，我可以通过 Chrome 的 Vue 扩展看到它：

有谁知道为什么它不起作用？

Answer 1

你没有正确导入 vue 可拖动包。
这样做：

import { VueDraggableNext } from "vue-draggable-next";

然后像这样使用它：

<draggable :list="list">     
<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>

希望有用！！

Answer 2

编辑：这是一个例子，为什么你应该 post 你的整个代码...

因此，在尝试了数小时不同的事情之后，我发现我已经添加了 components: 到 data()。现在，它可以正常工作了：

export default {
     components: {
    draggable: VueDraggableNext   },

这就是我在做的事情：

data() {
    return {
      components: {
        draggable: VueDraggableNext
      },

希望这对以后的人有所帮助...

VueJS 3 可拖动问题

VueJS 3 draggable issues

draggable

vuedraggable

vuejs3