一级导航/二级内容拖拽排序

最新推荐文章于 2023-02-21 11:31:19 发布

itclanCoder

最新推荐文章于 2023-02-21 11:31:19 发布

阅读量1.1k

点赞数

文章标签： qml flex wxpython rss 数据可视化

本文链接：https://blog.csdn.net/wzc_coder/article/details/121896620

版权

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（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&