基于vue-draggable 的三级拖动排序

vue-draggable 

之前项目中需要用到拖动排序，就去网上找资料，本来最开始是想用jquery-ui里的拖动的，后面发现不符合我的预期也不知道能不能跟vue.js兼容，后面我试过了，单个的可以但是层级太多就不一样了。

废话少说直接上代码

先看数据结构，和页面的呈现，等会再来上代码。

这就是三层结构渲染出来的图。那个海锚一样的东西是可以点击的，点击后会出现当前类型所带的产品。等会会说的
我们现在来看下我实现后的拖动效果，如下

所有父类型里面的产品拖动如下

控制台的打印

---

好了，放了那么多图，数据结构也发了。接下来我们来上代码和思路。

先上html的代码，这里我的页面是jsp，但是不影响html兼容，项目中途接手，很古老的jsp我也没办法

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<link rel="stylesheet" href="${ctx}/res/ifw/plugins/datatables/dataTables.bootstrap.css"/>
<style>
    [v-cloak] {
        display: none;
    }

    .flip-list-move {
        transition: transform 0.5s;
    }

    .handle {
        float: right;
        padding-top: 2px;
        padding-bottom: 8px;
    }

    .no-move {
        transition: transform 0s;
    }

    .ghost {
        opacity: 0.5;
        background: #c8ebfb;
    }

    .list-group {
        min-height: 20px;
    }

    .list-group-item {
        cursor: move;
    }

    .list-group-item i {
        cursor: pointer;
    }

</style>
<div id="vueSort" class="box box-darkness">
    <div class="box-header with-border">
        <h3 class="box-title">排序</h3>
        <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
            </button>
        </div>
    </div>

    <div class="box-body" style="position: relative">
        <div class="col-md-3">
            <ul id="main-nav1" class="nav nav-tabs nav-stacked">
                <draggable class="list-group" tag="ul" v-model="listProductType":move="getdata" @update="datadragEnd">
                    <transition-group type="transition" :name="'flip-list'">
                        <li class="list-group-item" v-for="(element,index) in listProductType"  :key="element.id">
                            <a :href="'#'+forId(element.uuid)" class="nav-header collapsed" data-toggle="collapse"><i
                                    v-show="element.productList.length>0"
                                    aria-hidden="true"
                                    :class="{'fa fa-anchor':isActive,'glyphicon glyphicon-pushpin':!isActive}"
                                    @click="submenu"></i></a>
                            {
  {element.name}}
                            <i class="fa fa-align-justify handle" v-show="element.productTypes.length>0"
                               @click="showLeve2(index)"></i>
                            <template v-if="element.productList.length>0">