Vue Draggable List

Posted on  by admin

Modified3 months ago. I'm using Vue.Draggable plugin to implement a draggable list. I'm passing a sorted computed property, like the following:. Draggable list:. The problem here is the draggable list never works because i'm forcing the list sorting (using lodash _.sortBy), the question is how i can sort inside a draggable list.

Setting up vue.draggable

3838 bronze badges. While it is a computed value the list will sorted again when you drag it.

I think the best thing to do is sort it when mounted:(So only initially). I know this is kind of old but I've also tried Googling for a solution and couldn't find any.

Not the answer you're looking for? Browse other questions tagged javascriptvue.jsvue.draggable or ask your own question.

A few minutes later I came up with this:. So instead of using a computed for sorting, I just do the sorting in the @change listener since that is being called AFTER vuedraggable is done sorting.

Beyond using the native HTML 5 drag-and-drop API, there are tons of JavaScript libraries out there that help you implement drag-and-drop functionality in your web application with little to no effort.

One of the most popular and sought-after in this list is Sortable.js, having over 23k likes on its GitHub repo.

vue.draggable features

You might guess that it’s because the community behind this project worked on bringing the library to literally all frontend frameworks, including Angular, React, Vue, Polymer, Ember.js, and others.

  • In this tutorial, we will be exploring vue.draggable — the official Sortable.js component for Vue-based projects — while covering the following sections:.
  • Setting up vue.draggable (for Vue 2.x and 3). Building a sample Kanban board similar to Trello — a practical application. At the end of the tutorial, here is what our project will look like:.
  • Before we get into the article, here are some things you should have:. Basic familiarity with Vue.js and Vue CLI installed.
  • Node.js and npm/yarn installed. Some of the reasons the developer community prefers vue.draggable for drag-and-drop implementation includes:.
  • Supported touch devices — Unlike other libraries out there, vue.draggable drag-and-drop implementation is not just limited to moving elements with your mouse cursor; it works on touch devices also.
  • Drag handles and selectable text — This library also lets you handle drag events and automatically recognizes when the user is trying to select a text in a draggable element.

vue.draggable reuses existing UI library components — You can also attach existing Vue components to draggable elements. Adding vue.draggable to a new Vue project is pretty straightforward. First, you want to create a new application with Vue CLI:.

Building a Kanban board

After creating our new application, we can add the vue.draggable package by running:. N.B., if your application is built with Vue 3 rather than 2.x, you should install [email protected] instead:.

vue.draggable props

  • To try things out, open up src/App.vue in your project folder and change its contents to the code below:. Here, we’d imported the draggable component from vue.draggable and rendered it twice with dummy data just to showcase how this library works.
  • In the next section, we will dive into how these data are added, along with some other props you can use in the draggable component.

Next, run the app:. You should see the following output in your browser:.

Out of the box, all child elements in the component will have drag-and-drop functionality. This is quite similar to how CSS flexbox works:.