栅格布局实现拖动换位置效果

应用场景：带有多个div块，可以随意拖动并转换位置。
第一步：需要定义窗口List以及需要使用的变量。

 RowList: [
                {
                    name: '电子', size: 6, key: 1,
                },
                {
                    name: '数据', size: 12, key: 2,
                },
                {
                    name: 'XXX', size: 6, key: 3,
                },
                {
                    name: 'XXX', size: 6, key: 4,
                },
                {
                    name: 'XXX', size: 6, key: 5,
                },
                {
                    name: 'XXX', size: 6, key: 6,
                },
                {
                    name: 'XXX', size: 6, key: 7,
                },
                {
                    name: 'XXX', size: 6, key: 8,
                },
                {
                    name: 'XXX', size: 6, key: 9,
                },
                {
                    name: 'XXX', size: 6, key: 10,
                },
                {
                    name: 'XXX', size: 6, key: 11,
                },
            ],//窗口数组
            ending: null,//拖拽使用
            dragging: null,//拖拽使用

第二步：编写实现拖动转换位置的js方法

        handleDragStart(e, item) {
            this.dragging = item;
        },
        handleDragEnd(e, item) {
            if (this.ending.key === this.dragging.key) {
                return;
            }
            let newItems = [...this.RowList];
            const src = newItems.indexOf(this.dragging);
            const dst = newItems.indexOf(this.ending);
            newItems.splice(src, 1, ...newItems.splice(dst, 1, newItems[src]));
            console.log(newItems);
            this.RowList = newItems;
            this.$nextTick(() => {
                this.dragging = null;
                this.ending = null;
            });
        },
        handleDragOver(e) {
            // 首先把div变成可以放置的元素，即重写dragenter/dragover
            // 在dragenter中针对放置目标来设置
            e.dataTransfer.dropEffect = "move";
        },
        handleDragEnter(e, item) {
            // 为需要移动的元素设置dragstart事件
            e.dataTransfer.effectAllowed = "move";
            this.ending = item;
        },

第三步：HTML块编写，我这里使用了栅格布局(我这段代码太长了大概有十多块，只放一块的内容那)

   <div class="cockpitMain">
                <el-row :gutter="20">
                    <transition-group class="container_container" tag="div">
                        <template v-for="item in RowList">
                            <el-col :span="item.size"
                                    :key="item.key"
                            >
                            <!-- 电子-->
                                <!-- 电子-->
                                <div draggable="true"
                                     @dragstart="handleDragStart($event, item)"
                                     @dragover.prevent="handleDragOver($event, item)"
                                     @dragenter="handleDragEnter($event, item)"
                                     @dragend="handleDragEnd($event, item)"
                                     class="cockpitMainLeft" v-if="item.name == '电子'">
                                    <div class="mainUpperText">
                                        <span @click="openElectronicFileConversionDialog">电子</span>
                                    </div>
        							</div>                            
 							</el-col>
                        </template>
                    </transition-group>
                </el-row>
            </div>