javascriptvue.jsvuejs2drag-and-dropdragula

Vue-Dragula not displaying animations

I'm just experimenting with VueDragula, and that's what I made:

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>

But somehow, there's just no animation and the dragged element is displayed at the bottom of the list?

Here are the official examples

What am I doing wrong?

Solution

  • You forgot to load the styles of vue-dragula. Import the styles from the directory /styles. You probably want to import the minified css styles:

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