之前项目中需要用到拖动排序，就去网上找资料，本来最开始是想用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 href="https://www.jb51.net/${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> <div> <h3>排序</h3> <div> <button type="button" data-widget="collapse"><i></i> </button> </div> </div> <div> <div> <ul> <draggable tag="ul" v-model="listProductType":move="getdata" @update="datadragEnd"> <transition-group type="transition" :name="'flip-list'"> <li v-for="(element,index) in listProductType" :key="element.id"> <a :href="'#'+forId(element.uuid)" 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 v-show="element.productTypes.length>0" @click="showLeve2(index)"></i> <template v-if="element.productList.length>0"> <ur :id="forId(element.uuid)"> <draggable tag="ul":move="getdata" v-model="element.productList" @update="datadragEnds"> <transition-group type="transition" :name="'flip-list'"> <li v-for="e in element.productList" :key="e.id"> <a> {{e.name}}</a> </li> </transition-group> </draggable> </ur> </template> </li> </transition-group> </draggable> </ul> </div> <div v-show="one.productTypes.length>0&&showOne"> <span><h3>--->>>{{one.name}}</h3></span> <ul> <draggable tag="ul" v-model="one.productTypes" :move="getdata"@update="datadragEnd"> <transition-group type="transition" :name="'flip-list'"> <li v-for="(element,index) in one.productTypes" :key="element.id"> <a :href="'#'+forId(element.uuid)" 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 v-show="element.productTypes.length>0" @click="showLeve3(index)"></i> <template v-if="element.productList.length>0"> <ur :id="forId(element.uuid)"> <draggable tag="ul":move="getdata" v-model="element.productList" @update="datadragEnds"> <transition-group type="transition" :name="'flip-list'"> <li v-for="e in element.productList" :key="e.id"> <a> {{e.name}}</a> </li> </transition-group> </draggable> </ur> </template> </li> </transition-group> </draggable> </ul> </div> <div v-show="two.productTypes.length>0&&showTwo"> <span><h3>--->>>{{two.name}}</h3></span> <ul> <draggable tag="ul" v-model="two.productTypes":move="getdata" @update="datadragEnd"> <transition-group type="transition" :name="'flip-list'"> <li v-for="(element,index) in two.productTypes" :key="element.id"> <a :href="'#'+forId(element.uuid)" 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}} <template v-if="element.productList.length>0"> <ur :id="forId(element.uuid)"> <draggable:move="getdata" tag="ul" v-model="element.productList" @update="datadragEnds"> <transition-group type="transition" :name="'flip-list'"> <li v-for="e in element.productList" :key="e.id"> <a> {{e.name}}</a> </li> </transition-group> </draggable> </ur> </template> </li> </transition-group> </draggable> </ul> </div> </div> <div> <button type="button"@click="save">保存 </button> <button type="button" @click="reset">重置</button> </div> </div> <script type="text/javascript" src="https://www.jb51.net/${ctx}/res/js/vue/vue.js"></script> <!-- CDNJS :: Sortable (https://cdnjs.com/) --> <script src="https://www.jb51.net/${ctx}/res/js/vue/Sortable.min.js"></script> <!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) --> <script src="https://www.jb51.net/${ctx}/res/js/vue/vuedraggable.umd.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/${ctx}/res/js/sort/combinationSort.js"></script>
接下来是js。