基于Vue快速实现列表拖拽排序

最新推荐文章于 2024-06-05 18:03:54 发布

七彩猫猫虫

最新推荐文章于 2024-06-05 18:03:54 发布

阅读量872

点赞数

分类专栏：工作中的小问题文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/sdaw_1/article/details/125878182

版权

工作中的小问题专栏收录该内容

34 篇文章 0 订阅

订阅专栏

参考

在这里插入图片描述

html

<div class="drag_box">
                <!-- <div class="each" v-for="(item,index) in sortList" class="area" :key="index" draggable="true">
                    {{item.name}}</div> -->
                <ul class="drag_list">
                    <li @dragenter="dragenter($event, index)" @dragover="dragover($event, index)"
                        @dragstart="dragstart(index)" draggable v-for="(item, index) in tableHeader" :key="index"
                        class="list-item">
                        {{item.column_comment}}
                    </li>
                </ul>
            </div>

data

return {
                    sortList: [], //记录打开拖拽框前的顺序，点击取消时赋值
                    dragIndex: '',
                    enterIndex: '',
                    }

methods

dragstart(index) {
                    this.dragIndex = index;
                },
                dragenter(e, index) {
                    console.log(index, 'index')
                    e.preventDefault();
                    let fixed = 0
                    for (let num = 0; num < this.tableHeader.length; num++) {
                        if(this.tableHeader[num].fixed ==true){
                            fixed+=1
                        }
                    }
                    // 避免源对象触发自身的dragenter事件
                    if (this.dragIndex !== index) {
                        //前几列固定 无法拖拽
                        if (index >= fixed) {
                            const source = this.tableHeader[this.dragIndex];
                            this.tableHeader.splice(this.dragIndex, 1);
                            this.tableHeader.splice(index, 0, source);
                            // 排序变化后目标对象的索引变成源对象的索引
                            this.dragIndex = index;
                        }

                    }

                },
                dragover(e, index) {
                    e.preventDefault();
                },
                showDrag() {
                    this.dialogDrag = true
                    // this.sortList = this
                    Object.assign(this.sortList, this.tableHeader)
                },
                dialogDragCancel() {
                    this.tableHeader = this.sortList
                    this.dialogDrag = false
                },
                dragSubmit() {
                    console.log(this.tableHeader, '记录排序数组')
                    this.tableHeader = this.tableHeader
                    this.dialogDrag = false
                },

样式

    .drag_list {
        list-style: none;
    }

    .drag_list .list-item {
        cursor: move;
        width: 100px;
        background: #EA6E59;
        border-radius: 4px;
        color: #FFF;
        /* margin-bottom: 6px; */
        height: 40px;
        line-height: 40px;
        text-align: center;
        display: inline-block;
        margin: 10px;
    }