Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at the best packages for adding drag and drop elements, animation, and debouncing.

Vue Slicksort

Vue Slicksort is an easy to use package that lets us create sortable lists in our Vue app in a snap.

To use it, we run:

npm i vue-slicksort

to install it.

Then we write:

<template>
  <div class="root">
    <SlickList lockAxis="y" v-model="items">
      <SlickItem v-for="(item, index) in items" :index="index" :key="index">{{ item }}</SlickItem>
    </SlickList>
  </div>
</template>

<script>
import { SlickList, SlickItem } from "vue-slicksort";
export default {
  components: {
    SlickItem,
    SlickList
  },
  data() {
    return {
      items: Array(20).fill().map((_, i)=> `item ${i}`)
    };
  }
};
</script>

to use it.

We use the SlickList item for creating the container.

Then we put SlickItem components inside it to display the sortable list.

Now we can drag and drop items on the list.

vue-dragula

vue-dragula is another easy to use drag and drop library for Vue apps.

To use it, we run:

npm i vue-dragula

Then we write:

main.js

import Vue from "vue";
import App from "./App.vue";
const VueDragula = require("vue-dragula");

Vue.use(VueDragula);
Vue.config.productionTip = false;
new Vue({
  render: h => h(App)
}).$mount("#app");

App.vue

<template>
  <div class="root">
    <div class="container" v-dragula="colOne" bag="first-bag">
      <div v-for="text in colOne" :key="text">{{text}}</div>
    </div>
    <div class="container" v-dragula="colTwo" bag="first-bag">
      <div v-for="text in colTwo" :key="text">{{text}}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colOne: Array(15)
        .fill()
        .map((_, i) => `item ${i}`),
      colTwo: Array(15)
        .fill()
        .map((_, i) => `item ${i + 20}`)
    };
  }
};
</script>

We created 2 draggable lists with the v-dragula directive.

We set the bag prop to the same name so that we can drag and drop between them.

Inside each container, we render the elements that are draggable.

#programming #javascript #web-development #software-development #vue #vue.js