Vue.DraggableVue 动态拖放组件

Vue.Draggable 是基于 Sortable.js 的 Vue 拖放组件。它允许拖放和视图模型数组同步，基于并提供 Sortable.js 的所有功能。

Demo

特性

• 完全支持 Sortable.js 功能：
  
  
  
  • 支持触摸设备
  
  
  • 支持拖动手柄和可选文本
  
  
  • 智能自动滚动支持
  
  
  • 不同列表之间的拖放
  
  
  • 没有 jQuery 依赖
  
  


• 保持同步HTML和视图模型列表


• 与 Vue.js 2.0 transition-group 兼容


• 支持取消


• 在需要完全控制时报告任何更改的事件


• 重用现有的 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="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>

<!-- CDNJS :: Sortable (https://cdnjs.com/) -->

<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>

<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->

<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>