Adding Sortable to a List in VueJS 3 in 3 Simple steps.

Step 1. Install vue.draggable.next

yarn add vuedraggable@next

npm i -S vuedraggable@next

Step 2 : Import and add as component

import draggable from 'vuedraggable';
export default {
  components:{draggable},
...

Step 2 : Use it as follows to create a Loop.

<draggable group="node"  v-model="posts" item-key="id">
        <template #item="{ element, index }" >
            <div>{{ element.title }}</div>
        </template>
</draggable>
   

Note: Don’t replace “element” with the model name. I was making this mistake and it took me a while that it has to remain as element name only.

How to use a Handle

<draggable group="node" handle=".handle"  v-model="posts" item-key="id">
        <template #item="{ element, index }" >
            <div>
             <div class="handle">Handle</div>
            <div>{{ element.title }}</div>
            </div>
        </template>
</draggable>
   

Note : You need to style the handle with CSS.

References.

https://www.npmjs.com/package/vue-draggable-next