虽互不曾谋面,但希望能和您成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
标星公众号(ID:itclanCoder)
背景
在一些后台管理系统里,有时候需要对一级导航拖拽排序,也要对一级导航下的二级内容进行拖拽排序,那这个是怎么实现的呢
实例效果
具体演示,可以点击文末左下方阅读原文
具体实现
<template>
<div class="tag-relation-wrap">
<div class="tag-tab">
<ul class="tag-tab-ul">
<draggable v-model="firstTabLists" animation="1000">
<transition-group>
<li v-for="(item) in firstTabLists"
:key="item.id"
class="tab-ul-li"
:class="{selectTab:curTab==item.id}"
@click="handleLevel1TagLi(item.id)"
>
{
{item.title}}
</li>
</transition-group>
</draggable>
</ul>
<div class="second-tag-content">
<draggable v-model="secondTagLists" class="draggable" @start="handleOnStart" @end="handleOnEnd" animation="1000">
<transition-group>
<div class="second-tag-list" v-for="(item) in secondTagLists" :key="item.id">
<div v-if="curTab == item.parent.id">
<div>
<img :src="item.logo" width="150&