vue draggable 使用demo

首先安装vue draggable：npm i -S vuedraggable
新建一个vue文件将下面代码全部copy运行即可

<template>
  <div class='draggable'>
    <vuedraggable class='v-draggable' v-model='list1'
      @start='startEvent'
      @end='endEvent'
      @change='changeEvent'
      :move='moveEvent'
      :options="{
        group: {name: 'people', pull: 'clone', put: false},
        fliter: '.disabled',
        draggable: '.active'
      }">
      <div :class="item.disabled ? 'active' : 'disabled'" class='vd-item' v-for='item in list1' :key='item.id'>{{item.name}}</div>
      <!-- <button slot='footer' @click='addPeople'>Add</button> -->
    </vuedraggable>
    <vuedraggable class='v-draggable' v-model='list2'
      @start='startEvent'
      @end='endEvent'
      @change='changeEvent'
      :move='moveEvent'
      :options="{
        group: {name: 'people', pull: true, put: listTwoput},
        animation: 200
      }">
      <div class='vd-item' v-for='item in list2' :key='item.id'>{{item.name}}</div>
      <!-- <button slot='footer' @click='addPeople'>Add</button> -->
      <!-- 
        关于options属性参数说明：
        1. group：可以是string可以是object，如果是object那么他有三个属性：name，pull，put
            name: 两个draggable groupName相同则表示可以相互之间进行移动
            pull：控制是否可以允许移出元素，有4个值分别是true/false/'clone'/function
              当pull为true/false时表示允许/不允许从当前组移出元素
              为'clone'时表示移出的元素是当前元素的复制
              为function时接收一个回调函数，可以进行自定义操作，function return true/false 可以根据逻辑来判断是否可以移出
            put：控制是否可以从其他组移入元素，有4个值true/false/['groupName1', 'groupName2']/function
              true/false表示是否允许其他组元素移入
              ['groupName1', 'groupName2']表示draggable组件的组名数组，表示只允许数组内的draggable组元素移入
              function 同pull
        2. animation：number，单位ms，定义动画时间
        3. disabled：boolean，定义当前元素是否允许拖动
        4. ghostClass：selector(css选择器如.className #className),当拖动元素的时候会出现一个影子元素，默认是与源拖动元素形同，通过设置ghostClass可以修改拖动过程中影子元素的样式
        5. sort：boolean，定义组内元素是否可以拖动
        6. delay：number，定义鼠标选中组内元素可以开始拖动的延迟时间
        7. handle: selector(css选择器如.className #className),使组内元素中符合选择器的元素成为拖动的手柄，只有按住拖动手柄才能使元素进行拖动
        8. fliter: selector，定义哪些元素不能进行拖放，可以设置多个选择器，用,隔开 (需要与draggable一起使用)
        9. draggable：selector，定义哪些元素可以进行拖放
        10. chosenClass: selector,当选中列表元素时可以给该元素增加一个class
        11. forceFallback：boolean，当值为true，将不使用原生的html5拖放，可以修改一些拖放中元素的样式等
        12：fallbackClass：string，当forceFallback为true时，设置拖放过程中元素的样式
        13. scroll：boolean，默认为true，当排序的容器是个可滚动区域时拖放可以引起区域滚动
        14. fallbackTolerance: 0,用像素指定鼠标在被视为拖动之前应该移动的距离
       -->
    </vuedraggable>
  </div>
</template>

<script>
import vuedraggable from 'vuedraggable'

export default {
  name: 'DraggableTest',
  components: {vuedraggable},
  data () {
    return {
      curChoose: '',
      list1: [{id: 1, name: '语文', disabled: true}, {id: 2, name: '数学', disabled: true}, {id: 3, name: '英语', disabled: false}],
      list2: [{id: 4, name: '政治', disabled: true}, {id: 5, name: '历史', disabled: true}, {id: 6, name: '地理', disabled: true}]
    }
  },
  methods: {
    // 右侧draggable组移入回调
    listTwoput () {
      if (this.list2.map((item) => {return item.name}).indexOf(this.curChoose) !== -1) {
        console.log('元素重复')
        return false
      } else {
        return true
      }
    },
    moveEvent (event, originalEvent) {
      // console.log('move')
      // console.log(event)
      // console.log(originalEvent) // 可以得到鼠标位置信息
    },
    changeEvent (event) {
      // console.log('change')
      // console.log(event)
    },
    startEvent (event) {
      // console.log('start')
      // console.log(event)
      this.curChoose = event.item.innerText
    },
    endEvent (event) {
      // console.log('end')
      // console.log(event.item) // 当前拖动元素
      // console.log(event.to) // 拖动目标列表
      // console.log(event.from) // 拖动源列表
      // console.log(event.oldIndex) // 拖动前位置
      // console.log(event.newIndex) // 拖动后位置
    },
    addPeople () {
      this.list2.push(Number(this.list2[this.list2.length-1]) + 1)
    }
  },
  updated() {
    // console.log(this.list1) // 可以得到拖动后的数组
    // console.log(this.list2)
  },
}
</script>

<style lang="less">
.v-draggable {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  .vd-item {
    width: 200px;
    height: 35px;
    background-color: rgb(101, 161, 101);
    margin-bottom: 10px;
    margin-right: 10px;
    color: #FFFFFF;
    line-height: 35px;
    cursor: pointer;
  }
}
.draggable {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
}
</style>