VUEJS 3可拖动问题

Question

我正在使用“ Vue-Dragable-Next”：“^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}来自“ vue-draggable-next”;

组件：{ 可拖动：vuedraggablenext }，

和

列表：[

  {name：'john'，id：1}，
      {名称：'joao'，id：2}，
      {名称：'jean'，id：3}，
      {名称：'Gerard'，ID：4}，
  ]，，
 

和我已经尝试的模板：

 ＆lt; draggable class =“ dragarea list-group w-full”：list =“ list” @change =“ log”＆gt;
  ＆lt; div
    class =“ List-Group-Item BG-Gray-300 M-1 P-3圆形MD文本中心”
    v-for =“列表中的元素”
    ：key =“ element.name”
  ＆gt;
    {{element.name}}
 ＆lt;/div＆gt;
＆lt;/draggable＆gt;
 

这是：

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

在我使用的情况下

＆lt; template #item =“ {element}”＆gt;

什么都没有显示，在另一种情况下，没有什么是可拖动的。

该组件已加载，我可以看到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

编辑：这是一个示例，为什么您应该发布整个代码...

因此，在尝试不同的几个小时后，我遇到了我添加的组件：数据（）。
现在，它可以正常工作：

export default {
     components: {
    draggable: VueDraggableNext   },

这就是我正在做的事情：

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

希望这对某人有帮助...