vue实现分组拖拽功能

 

<!-- vuedraggable实现多列组件相互拖拽案例 -->
<template>
  <div>
    <!--
    vue.draggable中文文档：
    https://www.itxst.com/vue-draggable/fueijmfy.html
    group 组名，相同组之间可以相互拖拽
    animation 设置拖动时的动画效果时长oyu
    组件拖拽样式基本由这三个类定义：
      dragClass 拖动元素的样式
      ghostClass 拖动元素占位符类名
      chosenClass 被选中目标的样式
    vuedraggable中常用的两个事件：
      start 开始拖拽时触发的事件
      end 拖拽完成时触发的事件
    注意：实现多列组件之间相互拖拽的方法是设置相同的group名
    -->
    <p>{{drag? '开始拖拽':'拖拽结束'}}</p>
    <div class="container">
      <div class="box">
        <draggable v-model="arr1" group="site" animation="300"
                   dragClass="dragClass"
                   ghostClass="ghostClass"
                   chosenClass="chosenClass"
                   @start="onStart"
                   @end="onEnd"
        >
          <transition-group>
            <div class="item" v-for="item in arr1" :key="item.id">{{item.name}}</div>
          </transition-group>
        </draggable>
 
      </div>
      <div class="box">
        <draggable v-model="arr2" group="site" animation="300"
                   dragClass="dragClass"
                   ghostClass="ghostClass"
                   chosenClass="chosenClass"
                   @start="onStart"
                   @end="onEnd">
          <transition-group>
            <div class="item" v-for="item in arr2" :key="item.id">{{item.name}}</div>
          </transition-group>
        </draggable>
      </div>
    </div>
 
 
  </div>
</template>
 
<script>
  //导入draggable组件
  import draggable from 'vuedraggable'
 
  export default {
    name: "Foo",
    //注册draggable组件
    components: {
      draggable,
    },
    data() {
      return {
        drag: false,
        arr1: [
          {id: 1, name: 'www.itxst.com'},
          {id: 2, name: 'www.jd.com'},
          {id: 3, name: 'www.baidu.com'},
          {id: 3, name: 'www.taobao.com'}
        ],
        arr2: [
          {id: 1, name: 'www.google.com'},
          {id: 2, name: 'www.msn.com'},
          {id: 3, name: 'www.ebay.com'},
          {id: 4, name: 'www.yahoo.com'}
        ]
      };
    },
    methods: {
      onStart(){
        this.drag = true;
      },
      onEnd(){
        this.drag = false;
      }
    },
  }
</script>
 
<style scoped>
  .container {
    display: flex;
  }
  .box {
    border: 1px solid #ddd;
    padding: 8px;
  }
  .box + .box {
    margin-left: 50px;
  }
  .item {
    border: 1px solid #ddd;
    padding: 8px;
  }
  .item + .item {
    margin-top: 8px;
  }
  /*
  注意：chosenClass、dragClass、ghostClass 这三个css类的顺序，会影响到组件拖拽样式
  */
  .dragClass {
    background-color: #ddd;
  }
  .ghostClass {
    border: 1px solid #6aa3ff !important;
  }
  .chosenClass {
    color: #6aa3ff;
  }
</style>