SortableJS/Vue.Draggable

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

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

见vue.draggable.next

https://sortablejs.github.io/Vue.Draggable/

https://david-desmaisons.github.io/draggable-example/

• 完全支持Sortable.js功能：
  • 支持触控设备
  • 支持拖动手柄和可选文本
  • 智能自动滚动
  • 支持不同列表之间的拖放
  • 没有 jQuery 依赖
• 保持同步 HTML 和查看模型列表
• 兼容 Vue.js 2.0 转换组（过渡动画）
• 支持撤销操作
• 需要完全控制时报告任何更改的事件
• 重用现有的 UI 库组件（如vuetify、element或vue material等）并使用tag和componentDataprops使它们可拖动 

yarn add vuedraggable
npm i -S vuedraggable

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

cf 示例部分

使用可拖动组件：

   
{{element.name}}

.vue 文件：

  import draggable from 'vuedraggable'
  ...
  export default {
        components: {
            draggable,
        },
  ...

    
        

            {{element.name}}
        
    

可拖动组件应该直接包装可拖动元素，或者transition-component包含可拖动元素。

    

        {{element.name}}
    
    Add

    

        {{element.name}}
    
    Add

computed: {
    myList: {
        get() {
            return this.$store.state.myList
        },
        set(value) {
            this.$store.commit('updateList', value)
        }
    }
}

value

Type: Array Required: false Default: null

可拖动组件的输入数组。通常与内部元素 v-for 指令引用的数组相同。这是使用 Vue.draggable 的首选方式，因为它与 Vuex 兼容。它不应该直接使用，但只能通过v-model指令：

list

类型：Array 必填：false 默认值：null

替代value属性，列表是一个与拖放同步的数组。主要区别在于list属性是由可拖动组件使用 splice 方法更新的，而value属性是不可变的。不要与 value prop 一起使用。

所有可排序的选项

2.19 版中的新功能

从 2.19 版本开始，可排序选项可以直接设置为 vue.draggable 属性。

这意味着所有可排序选项都是有效的可排序属性，但所有以“on”开头的方法除外，因为可拖动组件通过事件公开相同的 API。

支持 kebab-case 属性：例如ghost-class属性 将转换为ghostClass可排序选项。

设置句柄、可排序和组选项的示例：

tag

类型：String 默认值：'div'

可拖动组件创建为包含插槽的外部元素的元素的 HTML 节点类型。也可以将 vue 组件的名称作为元素传递。在这种情况下，可拖动属性将被传递给创建组件。如果您需要为创建的组件设置道具或事件，另请参阅componentData 。

clone

类型：Function 必填：false 默认值：(original) => { return original;}

当克隆选项为真时，在源组件上调用函数以克隆元素。唯一的参数是要克隆的 viewModel 元素，返回值是它的克隆版本。默认情况下 vue.draggable 重用 viewModel 元素，所以如果你想克隆或深度克隆它，你必须使用这个钩子。

move

类型：Function 必填：false 默认值：null

如果不为 null，则此函数将以与Sortable onMove 回调类似的方式调用。返回 false 将取消拖动操作。

function onMoveCallback(evt, originalEvent){
   ...
    // return false; — for cancel
}

evt 对象具有与Sortable onMove 事件相同的属性，以及 3 个附加属性：

• draggedContext: 链接到拖动元素的上下文
  • index: 拖拽元素索引
  • element: 拖拽元素底层视图模型元素
  • futureIndex：如果接受放置操作，则拖动元素的潜在索引
• relatedContext: 关联到当前拖动操作的上下文
  • index: 目标元素索引
  • element：目标元素视图模型元素
  • list: 目标列表
  • component: 目标 VueComponent

HTML：

javascript:

checkMove: function(evt){
    return (evt.draggedContext.element.name!=='apple');
}

查看完整示例：Cancel.html , cancel.js

componentData

类型：Object 必填：false 默认值：null

该 props 用于将附加信息传递给标签 props声明的子组件。 价值：

• props：要传递给子组件的属性
• attrs: 传递给子组件的属性
• on：要在子组件中订阅的事件

示例（使用元素 UI 库）：

    
        
{{e.description}}
     

methods: {
    handleChange() {
      console.log('changed');
    },
    inputChanged(value) {
      this.activeNames = value;
    },
    getComponentData() {
      return {
        on: {
          change: this.handleChange,
          input: this.inputChanged
        },
        attrs:{
          wrap: true
        },
        props: {
          value: this.activeNames
        }
      };
    }
  }

 Events

• 支持可排序事件：

  start, add, remove, update, end, choose, unchoose, sort, filter,clone 每当 onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onUnchoose, onSort, onClone 被 Sortable.js 以相同的参数触发时，就会调用事件。请参阅此处以供参考

  请注意，SortableJS OnMove 回调与move属性映射

HTML：

• 更改事件

  change当 list prop 不为 null 且对应的数组因拖放操作而改变时触发事件。 使用包含以下属性之一的参数调用此事件：

  • added: 包含添加到数组中的元素的信息
    • newIndex: 添加元素的索引
    • element: 添加的元素
  • removed：包含从数组中删除的元素的信息
    • oldIndex: 删除前元素的索引
    • element: 移除的元素
  • moved：包含在数组中移动的元素的信息
    • newIndex: 被移动元素的当前索引
    • oldIndex: 被移动元素的旧索引
    • element: 移动的元素

限制：页眉或页脚插槽都不能与转换组一起使用。

Header

使用header插槽在 vuedraggable 组件内添加不可拖动元素。重要提示：它应该与可拖动选项一起使用来标记可拖动元素。请注意，无论其在模板中的位置如何，标题槽都将始终添加在默认槽之前。如：

    

        {{element.name}}
    
    Add

Footer

使用footer插槽在 vuedraggable 组件内添加不可拖动元素。重要提示：它应该与可拖动选项一起使用来标记可拖动元素。请注意，无论其在模板中的位置，页脚插槽将始终添加在默认插槽之后。例如：

    

        {{element.name}}
    
    Add

• Vue.draggable 子项应该始终使用 v-for 指令映射列表或值道具

  • 您可以使用页眉和页脚插槽来绕过此限制。

• v-for 中的子元素应该像 Vue.js 中的任何元素一样被键入。请特别注意提供相关的关键值：

  • 通常提供数组索引作为键不起作用，因为键应链接到项目内容
  • 克隆的元素应该提供更新的键，例如使用克隆道具是可行的

• 克隆
• 处理
• 过渡
• 嵌套
• 桌子

可拖动示例