支援 Vue2/3 拖拽排序元件VueDraggablePlus

今天給大家分享一個超牛X的支援 vue2 vue3 通用拖拽子產品VueDraggablePlus。

vue-draggable-plus 拖拽排序子產品，支援 Vue>=v3或 Vue >=2.7，當然如果您是 vue2.6 一下使用者，隻需要導入 @vue/composition-api 就可以使用。

安裝

npm install vue-draggable-plus           

快速使用

<template>
    <VueDraggable ref="el" v-model="list">
      <div v-for="item in list" :key="item.id">
        {{ item.name }}
      </div>
    </VueDraggable>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list = ref([
  {
    name: 'Joao',
    id: 1
  },
  {
    name: 'Jean',
    id: 2
  },
  {
    name: 'Johanna',
    id: 3
  },
  {
    name: 'Juan',
    id: 4
  }
])
</script>           

您可以使用元件的方式，也可以使用 hooks 的方式，也可以使用指令的方式。

功能特性

• 功能齊全：全面繼承 Sortable.js 的所有功能
• 無縫遷移：适用于 Vue 3 和 Vue2
• 靈活使用：支援元件、指令、函數式調用，總有一款是您喜歡的
• 類型強：用 TypeScript 編寫，帶有完整的 TS 文檔
• 雙向綁定：支援 v-model 雙向綁定
• 自定義容器：将指定容器作為拖拽容器

提供了非常多的參數配置，感興趣的可以去看看。

// 文檔位址
https://alfred-skyblue.github.io/vue-draggable-plus/
// 倉庫位址
https://github.com/Alfred-Skyblue/vue-draggable-plus           

好了，今天的分享就到這了。