In this article, We will learn how to use vuedraggable
Step 1: Create new Vue project:
vue create draggable-demo
Step 2: Install require package:
npm i vuedraggable@next
Step 3: Open App.vue and add the following in it:
<template>
<h1>Draggable Demo</h1>
<draggable v-model="fruits" tag="ul"><template #item="{ element: fruit }">
<li>{{ fruit }}</li>
</template></draggable
>
</template>
<script setup>
import { ref } from 'vue';
import draggable from 'vuedraggable';
const fruits = ref(["Apple", "Mango", "Banana", "Orange", "Pineapple", "Grapes"]);
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
li{
text-decoration: none;
display: block;
}
</style>
Code in Action:
