Vue組件設計之多列表拖拽交換排序功能怎么實現

本篇內容主要講解“Vue組件設計之多列表拖拽交換排序功能怎么實現”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue組件設計之多列表拖拽交換排序功能怎么實現”吧!

在前端開發中，拖拽排序是一種提升用戶體驗非常好的方式，常見的場景有單列表拖拽排序，多列表拖拽交換排序，比如以下這種效果：

 下面將以這種效果為例，設計一個組件。

1. 安裝所需依賴

npm install vuedraggable --save

本例中目前所用的版本為：2.20.0

2. 組件設計實現

<template>
    <div class="dnd-list">
        <div class="dnd-list-aside" : >
            <h4>{{ list1Title }}</h4>
            <draggable :list="list1" group="article" class="drag-area" :set-data="setData">
                <div :key="element.id" v-for="element in list1" class="list-complete-item">
                    <div class="list-complete-item-handle1">
                        {{ element.id }} {{ element.title }} [{{ element.author }}]
                    </div>
                    <div >
                        <span  @click="deleteItem(element)">
                            <i  class="el-icon-delete" />
                        </span>
                    </div>
                </div>
            </draggable>
        </div>
        <div class="dnd-list-aside" :>
            <h4>{{ list2Title }}</h4>
            <draggable :list="list2" group="article" class="drag-area">
                <div :key="element.id" v-for="element in list2" class="list-complete-item">
                    <div class="list-complete-item-handle2" @click="pushItem(element)">
                        {{ element.id }}  {{ element.title }} [{{ element.author }}]
                    </div>
                </div>
            </draggable>
        </div>
    </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
    name: "DndList",
    components: { draggable },
    props: {
        list1: {
            type: Array,
            default() {
                return [];
            },
        },
        list2: {
            type: Array,
            default() {
                return [];
            },
        },
        list1Title: {
            type: String,
            default: "list1",
        },
        list2Title: {
            type: String,
            default: "list2",
        },
        width2: {
            type: String,
            default: "48%",
        },
        width3: {
            type: String,
            default: "48%",
        },
    },
    methods: {
        // 是否在列表一
        isNotInList1(v) {
            return this.list1.every((k) => v.id !== k.id);
        },
        // 是否在列表二
        isNotInList2(v) {
            return this.list2.every((k) => v.id !== k.id);
        },
        // 刪除列表項
        deleteItem(element) {
            for (const item of this.list1) {
                if (item.id === element.id) {
                    const index = this.list1.indexOf(item);
                    this.list1.splice(index, 1);
                    break;
                }
            }
            if (this.isNotInList2(element)) {
                this.list2.unshift(element);
            }
        },
        // 點擊切換列表項
        pushItem(element) {
            for (const item of this.list2) {
                if (item.id === element.id) {
                    const index = this.list2.indexOf(item);
                    this.list2.splice(index, 1);
                    break;
                }
            }
            if (this.isNotInList1(element)) {
                this.list1.push(element);
            }
        },
        // 拖拽交換時
        setData(dataTransfer) {
            // 解決火狐問題
            // 詳見 : https://github.com/RubaXa/Sortable/issues/1012
            dataTransfer.setData("Text", "");
        },
    },
};
</script>
<style lang="scss" scoped>
.dnd-list {
    background: #fff;
    padding-bottom: 40px;
    &:after {
        content: "";
        display: table;
        clear: both;
    }
    .dnd-list-aside {
        float:left;
        padding-bottom: 30px;
        &:first-of-type {
            margin-right: 2%;
        }
        .drag-area{
            margin-top: 15px;
            min-height: 50px;
            padding-bottom: 30px;
        }
    }
}
.list-complete-item {
    cursor: pointer;
    position: relative;
    font-size: 14px;
    padding: 5px 12px;
    margin-top: 4px;
    border: 1px solid #bfcbd9;
    transition: all 1s;
}
.list-complete-item-handle1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 50px;
}
.list-complete-item-handle2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 20px;
}
.list-complete-item.sortable-chosen {
    background: #4ab7bd;
}
.list-complete-item.sortable-ghost {
    background: #30b08f;
}
.list-complete-enter,.list-complete-leave-active {
    opacity: 0;
}
</style>

3. 組件使用示例

<template>
    <div class="box">
        <DndList :list1="list1" :list2="list2" :list1Title="list1Title" :list2Title="list2Title"></DndList>
    </div>
</template>
<script>
import DndList from "@/components/DndList";
export default {
    components:{
        DndList:DndList
    },
    data() {
        return {
            list1:[
                {id:1,title:"《西游記》",author:"吳承恩"},
                {id:2,title:"《紅樓夢》",author:"曹雪芹"},
                {id:3,title:"《水滸傳》",author:"施耐庵"},
                {id:4,title:"《三國演義》",author:"羅貫中"},
                {id:5,title:"《名人傳》",author:"羅曼羅蘭"},
                {id:6,title:"《鋼鐵是怎樣煉成的》",author:"奧斯特洛夫斯基"},
            ],
            list2:[
                {id:7,title:"《魯賓遜漂流記》",author:"笛福"},
                {id:8,title:"《格列佛游記》",author:"約翰斯威夫特"},
                {id:9,title:"《繁星春水》",author:"冰心"},
            ],
            list1Title:"我的圖書收藏",
            list2Title:"已讀完的圖書"
        };
    }
}
</script>
<style scoped>
.box{
    width:600px;
    margin:20px;
    padding:10px;
    background:#fff;
}
</style>

到此，相信大家對“Vue組件設計之多列表拖拽交換排序功能怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！