实现拖放和视图模型数组同步 - Vue.Draggable

2016-06-28      1040      Vue
项目简介

Vue.Draggable

Vue组件或者命令,允许拖放和视图模型数组同步

基于Sortable.js所有的功能特征

Demo

Features

  • Sortable.js功能特色的全支持
  • 保持同步视图模式和视图
  • 没有jquery依赖
  • 很好的配合Vue.js2.0过渡组运行
  • 支持取消

For Vue.js 2.0

使用可拖拽组件:

经典使用:

<draggable  :list="list" :options="{group:'people'}" @start="dragging=true" @end="dragging=false">
   <div v-for="element in list">{{element.name}}</div>
</draggable>

结合transition-group使用:

<draggable :list="list"> 
    <transition-group>
        <div v-for="element in list" :key="element.id">
            {{element.name}}
        </div>
    </transition-group>
</draggable>

.vue 文件:

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

可拖拽组件应该直接封装可拖拽元素,或者包含可拖拽元素的过渡组件。

Installation

  • 通过下列方法获取::
npm install vuedraggable
Bower install vue.draggable
  • For Modules

    // ES6
    //For Vue.js 2.0
    import draggable from 'vuedraggable'
    ...
    export default {
          components: {
              draggable,
              ...
          }
          ...
    
    //For Vue.js 2.0
    var draggable = require('vuedraggable')
  • <script>导入

    只需要在Vue之后导入vuedraggable.min.js或者 'vue.dragable.for'