vue使用vuedraggable實現(xiàn)嵌套多層拖拽排序功能

更新時間：2022年04月07日 07:55:23 作者：浩星

這篇文章主要為大家詳細介紹了vue使用vuedraggable實現(xiàn)嵌套多層拖拽排序功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vuedraggable實現(xiàn)嵌套多層拖拽排序功能的具體代碼，供大家參考，具體內(nèi)容如下

vue中實現(xiàn)嵌套多層拖拽功能。官網(wǎng)入口：

實現(xiàn)效果：（拖動左側調整一級的順序，拖動右側調整二級的順序）

實現(xiàn)步驟：

***這里使用了插件 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"
? ? ? >
? ? ? ? <!--拖拽內(nèi)容部分-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>
? ? ? ? <!--拖拽內(nèi)容部分-其他-->
? ? ? ? <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里面的最新數(shù)據(jù)</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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: