javascript - Vue-Dragula 不显示动画

Question

我只是在试验VueDragula，这就是我所做的：

let vm = new Vue({
    el: '#wrapper',
    data: {
      colOne:["hi", "you"]
    },
    methods:{
        onClick:function(){
            alert()
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-dragula@1.3.1/dist/vue-dragula.min.js"></script>
<div id="wrapper">
      <div class="wrapper">
        <div class="container" v-dragula="colOne" bag="first-bag">
          <!-- with click -->
          <div v-for="text in colOne">{{text}} <span  @click="onClick">[click me]</span></div>
        </div>
      </div>
    </div>

但是不知何故，只是没有动画并且被拖动的元素显示在列表的底部？

以下是官方示例

我究竟做错了什么？

标签： javascriptvue.jsvuejs2drag-and-dropdragula

Answer 1

您忘记加载vue-dragula. 从目录中导入样式/styles。您可能想要导入缩小的 css 样式：

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vue-dragula@1.3.1/styles/dragula.min.css" />