VUE开发 Vue-draggable插件实现拖放功能

将拖放功能添加到 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