sortable vue_基于Sortable.js的Vue拖放组件

sortable vue

Vue可拖动 (Vue.Draggable)

Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.

Vue组件(Vue.js 2.0)或指令(Vue.js 1.0)允许拖放以及与视图模型数组同步。

Based on and offering all features of Sortable.js

基于并提供Sortable.js的所有功能

View Demo 查看演示 View Demo 查看演示 Download Source 下载源

演示版 (Demo)

特征 (Features)

• Full support of Sortable.js features:

  全面支持Sortable.js功能：

  • Supports touch devices
    支持触摸设备
  • Supports drag handles and selectable text
    支持拖动手柄和可选文本
  • Smart auto-scrolling
    智能自动滚动
  • Support drag and drop between different lists
    支持在不同列表之间拖放
  • No jQuery dependency
    没有jQuery依赖

• Keeps in sync HTML and view model list

  保持同步HTML并查看模型列表

• Compatible with Vue.js 2.0 transition-group

  与Vue.js 2.0过渡组兼容

• Cancellation support

  取消支援

• Events reporting any changes when full control is needed

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

• Reuse existing UI library components (such as vuetify, element, or vue material etc...) and make them draggable using tag and componentData props

  重用现有的UI库组件(例如vuetify ， element或vue材质等)，并使用tag和componentData道具使其可拖动

安装 (Installation)

用npm或纱 (With npm or yarn)

yarn add vuedraggable

npm i -S vuedraggable

Beware it is vuedraggable for Vue 2.0 and not vue-draggable which is for version 1.0

请注意，它对于Vue 2.0是vuedraggable的，而对于版本1.0则不是vue-draggable

直接链接 (with direct link)

cf example section

cf示例部分

对于Vue.js 2.0 (For Vue.js 2.0)

Use draggable component:

使用可拖动组件：

典型用途： (