Learn to make a drag and drop interface to manipulate array data in Vue.js. Drag to sort array or drag elements between different arrays.

Thermo Fisher Scientific

Tom Nijhof

Blender

Community Picks is a section on daily.dev where our community members share the most interesting and valuable content they've discovered online. From insightful articles to handy tools, every post is a gem curated by our dedicated coomunity. To contribute to Community Picks, you need to have at least 250 reputation points, ensuring that only active and trusted members can share their finds.

Community Picks

Vue.js is great for making interactive interfaces. It includes interfaces where elements can be dragged around and dropped in order to manually sort elements, or group them in different ways. Vue Draggable is a handy wrapper around Sortable.js. You can even drag and drop elements between 2 or more arrays.

How Do I Drag and Drop in Vue?

Step 2 - Use the component to sort array Items

Step 3 - Use draggable components to move items between different arrays

Step 4 - Jazz it Up With a Smooth Transition

<p>Last commit in 2021 on the repos vue.draggable.next 🫤</p>
