vue使用draggable组件，实现页面的拖拉拽（二维）

1.在项目中总会遇见一些需要排序的数据 ， 我们可以通过vue.draggable 进行拖动排序 。
2.Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。
3.拖顶的数据和data里的数据为双向绑定 ，在界面变的时候data中的数据也在跟着变化

安装

npm i -S vuedraggable

<template>
      <div>
        <!--使用draggable组件-->
        <div class="itxst">
          <div class="col">
            <div class="title">左边</div>
            <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.name">{{ item.name }}</div>
              </transition-group>
            </draggable>
          </div>
          <!--  -->
          <div class="col ">
            <div class="title">右边</div> 
            <div>
              <button @click="add">添加</button>  
            </div> 
            <div v-for="item in arr3"  :key="item.name">
                <draggable
                  v-model="item.arr"
                  group="site"
                  animation="300"
                  dragClass="dragClass"
                  ghostClass="ghostClass"
                  chosenClass="chosenClass"
                  @start="onStart"
                  @end="onEnd"
                >
                  <transition-group class="group-ul">

                      <div class="item item-li" v-for="item2 in item.arr" :key="item2.name">{{ item2.name }}</div>

                  </transition-group>
                </draggable>
            </div>
          </div>
          <!--  -->


        </div>
        <div>{{ arr3 }}</div>
      </div>
    </template>

    <script>
    //导入draggable组件
    import draggable from "vuedraggable";
    export default {
      //注册draggable组件
      components: {
        draggable
      },
      data() {
        return {
          drag: false,
          //定义要被拖拽对象的数组
          arr1: [
            { id: 1, name: "八戒" },
            { id: 2, name: "悟空" },
            { id: 3, name: "唐僧" },
            { id: 3, name: "沙僧" }
          ],
          arr3: [
            {
              arr: [
                { id: 1, name: "八戒" },
                { id: 2, name: "悟空" },
                { id: 3, name: "唐僧" },
                { id: 3, name: "沙僧" }
              ]
            },
            {
              arr: [
                { id: 1, name: "八戒2" },
                { id: 2, name: "悟空2" },
                { id: 3, name: "唐僧2" },
                { id: 3, name: "沙僧2" }
              ]
            }
          ],
          arr2: [
            { id: 1, name: "萝卜" },
            { id: 2, name: "小白菜" },
            { id: 3, name: "大白菜" },
            { id: 4, name: "娃娃菜" }
          ]
        };
      },
      methods: {
        add(){
          this.arr3.push({
              arr: [
                // { id: 1, name: "八戒" },
                // { id: 2, name: "悟空" },
                // { id: 3, name: "唐僧" },
                // { id: 3, name: "沙僧" }
              ]
            })
        },
        //开始拖拽事件
        onStart() {
          this.drag = true;
        },
        //拖拽结束事件
        onEnd() {
          this.drag = false;
        }
      }
    };
    </script>


    <style scoped>
    .group-ul {
      display: block;
      border: 1px solid red;
        margin-top: 10px;
    }
    .item-li {

      display: inline-block;

    }
    .itxst {
      margin: 10px;
      display: flex;
    }
    .title {
      padding: 6px 12px;
    }
    .col {
      width: 50%;
      flex: 1;
      padding: 10px;
      border: solid 1px #eee;
      border-radius: 5px;
      float: left;
      height: 600px;
    }
    .col + .col {
      margin-left: 10px;
    }

    .item {
      padding: 6px 12px;
      margin: 0px 10px 0px 10px;
      border: solid 1px #eee;
      background-color: #f1f1f1;
    }
    .item:hover {
      background-color: #fdfdfd;
      cursor: move;
    }
    .item + .item {
      border-top: none;
      margin-top: 6px;
    }
    </style>