将拖放功能添加到 Vue.js 应用可以改善用户体验。因为拖放功能允许用户以更直观的方式与应用程序交互,所以用户可以更轻松地组织和操作数据。Vue-draggable 是实现拖放功能的绝佳工具,因为它简化了流程,即使是刚接触 Vue.js 的开发人员也可以轻松使用。将这个插件添加到 Vue.js 应用程序,你就可以创建更具吸引力和动态的用户体验,提高用户回头率。
安装
#yarn
yarn add vuedraggable@next
#npm
npm i -S vuedraggable@next
用法
让我们用 Vue-draggable 创建一个简单的可排序列表。
<template>
<div>
<draggable
v-model="cars"
@start="drag = true"
@end="drag = false"
item-key="id"
>
<template #item="{ element }">
<div>{{ element }}</div>
</template>
</draggable>
</div>
</template>
<script setup>
import { ref } from "vue";
import draggable from "vuedraggable";
const drag = ref(false);
const cars = ref(["Mercedes", "Toyota", "Honda", "Dodge"]);
</script>
插件地址:https://github.com/SortableJS/vue.draggable.next