Top Vue Packages for Adding Draggable Lists and Text Editing Capabilities

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 how the best packages for adding draggable lists into a Vue app.

vuedraggable

The vuedraggable package is a package that we can use to add draggable lists to our app.

To install it, we run:

npm i vuedraggable

Then we can use it by writing:

<template>
  <div class="demo">
    <draggable v-model="arr" group="people" @start="drag=true" @end="drag=false">
      <div v-for="element in arr" :key="element.id">{{element.name}}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable
  },
  data() {
    return {
      arr: [
        {
          id: 1,
          name: "foo"
        },
        {
          id: 2,
          name: "bar"
        },
        {
          id: 3,
          name: "baz"
        }
      ]
    };
  }
};
</script>

We registered the draggable component.

Then we nest out list inside it.

We also set our start and end handlers, which are run when we start and stop dragging respectively.

v-model binds to the latest value of arr .

Now we can drag and drop the names.

We can also use it with transition-group :

<template>
  <div class="demo">
    <draggable v-model="arr" group="people" @start="drag = true" @end="drag = false">
      <transition-group name="list">
        <div v-for="element in arr" :key="element.id">{{element.name}}</div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable
  },
  data() {
    return {
      arr: [
        {
          id: 1,
          name: "foo"
        },
        {
          id: 2,
          name: "bar"
        },
        {
          id: 3,
          name: "baz"
        }
      ]
    };
  }
};
</script>

<style>
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

We just put it inside the draggable component to add transition effects when dragging and dropping.

We can add a slot for the footer or header.

For instance, we can write:

<template>
  <div class="demo">
    <draggable v-model="arr" group="people" @start="drag = true" @end="drag = false">
      <p slot="header">header</p>
      <div v-for="element in arr" :key="element.id">{{element.name}}</div>
      <p slot="footer">footer</p>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";

export default {
  components: {
    draggable
  },
  data() {
    return {
      arr: [
        {
          id: 1,
          name: "foo"
        },
        {
          id: 2,
          name: "bar"
        },
        {
          id: 3,
          name: "baz"
        }
      ]
    };
  }
};
</script>

There are many other options that we can use to configure it, including changing the tag of the rendered elements, setting the list, watching move events, and more.

TinyMCE Vue

TinyMCE has a Vue version, so we can use the TinyMCE rich text editor without hassle.

To install it, we run:

npm install --save @tinymce/tinymce-vue

Then we can use it by writing:

<template>
  <div class="demo">
     <editor
       api-key="no-api-key"
       :init="{
         height: 500,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor |
           alignleft aligncenter alignright alignjustify |
           bullist numlist outdent indent | removeformat | help'
       }"
     />
  </div>
</template>

<script>
import Editor from '@tinymce/tinymce-vue'

export default {
   name: 'app',
   components: {
     'editor': Editor
   }
 }
</script>

We just import the component and register it.

Then we specify our plugins and other options.

We can add v-model to bind the inputted value to a state variable:

<template>
  <div class="demo">
    <editor
      api-key="no-api-key"
      :init="{
         height: 200,
         menubar: false,
         plugins: [
           'advlist autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table paste code help wordcount'
         ],
         toolbar:
           'undo redo | formatselect | bold italic backcolor |
           alignleft aligncenter alignright alignjustify |
           bullist numlist outdent indent | removeformat | help'
       }"
      v-model="content"
    />
    <p v-html="content"></p>
  </div>
</template>

<script>
import Editor from "@tinymce/tinymce-vue";

export default {
  name: "app",
  components: {
    editor: Editor
  },
  data() {
    return {
      content: ""
    };
  }
};
</script>

We have the v-model prop bound to content. And we added the p element with the v-html directive set to content to see what we typed.

Now we get a text editor in our app without much hassle.

Conclusion

We can use the vuedraggable library to lets us make list items draggable and droppable.

The Vue version of the TinyMCE is full of features and it’s easy to add.