文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue使用vuedraggable实现嵌套多层拖拽排序功能

2024-04-02 19:55

关注

本文实例为大家分享了vuedraggable实现嵌套多层拖拽排序功能的具体代码,供大家参考,具体内容如下

vue中实现嵌套多层拖拽功能。官网入口:

实现效果:(拖动左侧调整一级的顺序,拖动右侧调整二级的顺序)

实现步骤:

***这里使用了插件  vuedraggable

第一步:安装插件

cnpm install vuedraggable --save

第二步:在页面上引入插件并注册

import draggable from 'vuedraggable'
components: {
    draggable
  },

第三步:页面上使用

<template>
  <div class="wholeList">
    <draggable
      class="leftCon"
      :list="tolList"
    >
      <div class="leftConLi" v-for="element in tolList" :key="element.id">
        {{ element.name }}
      </div>
    </draggable>
    <ul class="oneUl">
      <li
        class="oneLi"
        v-for="(item,index) in tolList"
        :key="index"
      >
        <!--拖拽内容部分-1-->
        <draggable
          v-if="index === 0"
          class="dragArea list-group"
          :list="item.children"
          :clone="clone"
          :group="{ name: 'people', pull: pullFunction }"
          @start="start"
        >
          <div v-for="element in item.children" :key="element.id" class="list-group-item">
            {{ element.name }}
          </div>
        </draggable>
        <!--拖拽内容部分-其他-->
        <draggable
          v-else
          class="dragArea list-group"
          :list="item.children"
          :clone="clone"
          group="people"
        >
          <div v-for="element in item.children" :key="element.id" class="list-group-item">
            {{ element.name }}
          </div>
        </draggable>
      </li>
 
    </ul>
 
    <el-button @click="getNewList">点我看console里面的最新数据</el-button>
  </div>
</template>
 
<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  data() {
    return {
      tolList: [
        {
          name: '第一天',
          children: [
            {
              name: '11111', id: 1
            }
          ]
        }, {
          name: '第二天',
          children: [
            {
              name: 'aaaaa', id: 11
            }, {
              name: 'bbbbbb', id: 12
            }
          ]
        },
        {
          name: '第三天',
          children: [
            {
              name: ',,,111,,', id: 21
            }
          ]
        }
      ],
      controlOnStart: true
    }
  },
  methods: {
    clone({ name, id }) {
      return { name, id: id }
    },
    pullFunction() {
      return this.controlOnStart ? 'clone' : true
    },
    start({ originalEvent }) {
      this.controlOnStart = originalEvent.ctrlKey
    },
    getNewList() {
      let a = this.tolList
      console.log(a)
    }
  }
}
</script>
<style lang="scss" scoped>
  .wholeList{
    margin-top:200px;
    width:500px;
    display: flex;
    flex-wrap: wrap;
    .leftCon{
      width: 100px;
      .leftConLi{
        background: #42B974;
        line-height: 80px;
        margin-bottom:10px;
      }
    }
    .oneUl{
      width: calc(100% - 100px);
      .oneLi{
        display: flex;
        height: 80px;
        margin-bottom:10px;
        border:1px solid red;
        .dragArea{
          width: 100%;
          min-height: 30px;
        }
      }
 
    }
  }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯