Drag and Drop in Vue in Laravel Inertia

Let's learn how we can use a plugin to reorder a list using Drag and Drop.

The next operation that we are going to apply is to be able to sort them all, that is, using drag and drop to be able to reorder them so that they have, for the sake of redundancy, another order. For this we are going to use the following plugin. There are more but this one doesn't work very well. It is from the agent or is a variant, rather, of sortable js, which is a fairly famous plugin for javascript. In this case, this is like the port for Vue. We simply write Drag and Drop next in Vue and the following page would be here:

https://github.com/SortableJS/vue.draggable.next

Important, the one that says next, at least to date, you have to check that it is for Vue 3 as indicated here for Vue 2 and one would be this one that we have here, at least to date it remains like this and as I indicated, it is from the sort js agent. Here you can take a look at the plugin in case you don't know it, it is only for javascript. Well, here we have the installation and now we are going to see its use. We copy the Command and install:

$ npm i -S vuedraggable@next

And unlike other plugins, there's no need to configure it on the main Vue instance - just import it as any other component:

<script>
import draggable from "vuedraggable";

export default {
 components: {
   draggable,
 },
}
</script>

And use it; to use it, there are several configurations and you can see the details in the official documentation, but, the basic use, which consists of creating a list that can be reordered via Drag and Drop, we have:

<draggable v-model="myArray">
 <template #item="{ element }">
   <div>
     {{ element }}
   </div>
 </template>
</draggable>
***
data() {
 return {
   myArray: ["Test", "Test 2", "Test 3", "Test 4"],
 };
},

Using the draggable component, we indicate the v-model and the property, which must be an array, either of String, as in the previous example, or of objects; there is no need to use a v-for to iterate the data, instead, we can use the:

#item="{ element }"

12-12-2024 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Drag and Drop in Vue in Laravel Inertia