Vue.DraggableVue 動態(tài)拖放組件

Vue.Draggable 是基于 Sortable.js 的 Vue 拖放組件。它允許拖放和視圖模型數(shù)組同步，基于并提供 Sortable.js 的所有功能。

Demo

特性

• 完全支持 Sortable.js 功能：
  • 支持觸摸設(shè)備
  • 支持拖動手柄和可選文本
  • 智能自動滾動支持
  • 不同列表之間的拖放
  • 沒有 jQuery 依賴
• 保持同步HTML和視圖模型列表
• 與 Vue.js 2.0 transition-group 兼容
• 支持取消
• 在需要完全控制時報告任何更改的事件
• 重用現(xiàn)有的 UI 庫組件（例如 vuetify、element 或 vue 材料等）并使用 tag 和 componentData 道具使它們可拖動

安裝

• npm or yarn

yarn add vuedraggable

npm i -S vuedraggable

請注意，對于 Vue 2.0 而言，它是 vuedraggable，而不是版本 1.0 的 vue-draggable

• 瀏覽器

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="http://cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>