vuedraggable无效如何解决此错误？

问题描述

我想在vue项目中使用拖动器库。 但是效果不好。 仅拖动有效，但不起作用（通过拖动移动图标）。 另外，有时出现项目，有时不出现取决于使用<h2>11</h2>（第6行）和style="display: inline-block(or inline / block)"（第8行）

我使用了github上的一些代码。

https://sortablejs.github.io/Vue.Draggable/#/two-lists https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/two-lists.vue

这是我使用的代码。

test.vue

<template>
  <div class="row">
    <div class="col-3">
      <h3>Draggable 1</h3>
      <draggable class="list-group" :list="list1" group="people" @change="log">
        <!-- <h2>11</h2> -->
        <div
          style="display: inline-block"
          class="list-group-item"
          v-for="(element,index) in list1"
          :key="element.name"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>

    <div class="col-3">
      <h3>Draggable 2</h3>
      <draggable class="list-group" :list="list2" group="people" @change="log">
        <div
          class="list-group-item"
          v-for="(element,index) in list2"
          :key="element.name"
        >
          {{ element.name }} {{ index }}
        </div>
      </draggable>
    </div>

    <rawdisplayer class="col-3" :value="list1" title="List 1" />
    <rawdisplayer class="col-3" :value="list2" title="List 2" />
  </div>
</template>
<script>
import draggable from "vuedraggable";
import rawdisplayer from "@/components/infra/raw-displayer.vue"; 
export default {
  name: "two-lists",display: "Two Lists",order: 1,components: {
    draggable,rawdisplayer
  },data() {
    return {
      list1: [
        { name: "John",id: 1 },{ name: "Joao",id: 2 },{ name: "Jean",id: 3 },{ name: "Gerard",id: 4 }
      ],list2: [
        { name: "Juan",id: 5 },{ name: "Edgard",id: 6 },{ name: "Johnson",id: 7 }
      ]
    };
  },methods: {
    add: function() {
      this.list.push({ name: "Juan" });
    },replace: function() {
      this.list = [{ name: "Edgard" }];
    },clone: function(el) {
      return {
        name: el.name + " cloned"
      };
    },log: function(evt) {
      window.console.log(evt);
    }
  }
};
</script>

rawdisplayer.vue

<template>
  <div>
    <h3>{{ title }}</h3>
    <pre>{{ valueString }}</pre>
  </div>
</template>
<script>
const props = {
  name: "rawdisplayer",title: {
    required: true,type: String
  },value: {
    required: true
  }
};
export default {
  props,computed: {
    valueString() {
      return JSON.stringify(this.value,null,2);
    }
  }
};
</script>
<style scoped>
pre {
  text-align: start;
}
</style>

首先，它看起来像图片编号1 enter image description here

enter image description here

如果我添加<h2>11</h2>第6行（显示该项目），则它看起来像是图片2 但拖动后仍然掉落不起作用。 请帮帮我！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）