Vue+draggable实现拖拽表格字段进行分组

<template>

    <div>

        <div class="my_draggle">

            <!-- 左边数据框 -->

            <div id="Id_mdc_left">

                <h3>列表选择列字段</h3>

                <draggable class="mdc_left" v-model="originDataArr" v-bind="{ sort: false }"

                    v-bind:group="{ name: 'person', pull: 'clone', put: false }" v-bind:clone="cloneItem">

                    <div v-for="(item, index) in originDataArr" v-bind:key="index">

                        <el-tooltip :content="item.aliasName" placement="top" effect="dark" :disabled="isShowTooltip">

                            <span class="over-ellipsis" @mouseover="mouseOver($event)">{{ item.aliasName }}</span>

                        </el-tooltip>

                    </div>

                </draggable>

            </div>

            <!-- 右边拖动区 -->

            <div id="Id_mdc_right">

                <h3>A组字段</h3>

                <draggable class="mdc_right" v-model="newDataArr" v-bind:group="{ name: 'person' }" v-on:start="dragItem"

                    v-on:add="addItem">

                    <div v-for="(item, index) in newDataArr" v-bind:key="index" class="dialog">

                        <el-button type="text" class="delIcon" @click="deleteRow(index)" icon="el-icon-delete"></el-button>

                        <span class="delName">{{ item.aliasName }}</span>

                    </div>

                </draggable>

                <h3>B组字段</h3>

                <draggable class="mdc_right" v-model="newDataArr01" v-bind:group="{ name: 'person' }" v-on:start="dragItem01"

                    v-on:add="addItem01">

                    <div v-for="(item, index) in newDataArr01" v-bind:key="index" class="dialog">

                        <el-button type="text" class="delIcon" @click="deleteRow_two(index)"

                            icon="el-icon-delete"></el-button>

                        <span class="delName">{{ item.aliasName }}</span>

                    </div>

                </draggable>

            </div>

        </div>

    </div>

</template>

<script>

import draggable from "vuedraggable"

export default {

    name: 'dragViewflog',

    components: {

        draggable

    },

    props: {

        msg: String

    },

    data: function () {

        return {

            originDataArr: new Array(),

            newDataArr: new Array(),

            newDataArr01: new Array(),

            isShowTooltip: false,

            time: "",

            localTime: ""

        }

    },

    mounted: function () {

        this.initData();

    },

    methods: {

        deleteRow(index) {

            this.newDataArr.splice(index, 1)

        },

        deleteRow_two(index) {

            this.newDataArr01.splice(index, 1)

        },

        initData: function () {

            this.originDataArr = [

                { columnName: "ABC", aliasName: "数据01", columnType: 15, },

                { columnName: "abc", aliasName: "数据02", columnType: 15, },

                { columnName: "#", aliasName: "数据03", columnType: 15, },

                { columnName: "&", aliasName: "数据04", columnTypeage: 15, }

            ]

        },

        cloneItem: function (val) {

            return JSON.parse(JSON.stringify(val))

        },

        dragItem: function (widget) {

            console.log("01", widget);

        },

        addItem(widget) {

            console.log(widget)

            this.newDataArr = this.newDataArr.filter(

                (obj, index) => this.newDataArr.findIndex((item) => item.aliasName === obj.aliasName) === index

            )

        },

        dragItem01: function (widget) {

            console.log("03", widget);

        },

        addItem01(widget) {

            console.log(widget)

            this.newDataArr01 = this.newDataArr01.filter((obj, index) =>

                this.newDataArr01.findIndex((item) => item.aliasName === obj.aliasName) === index)

        },

        mouseOver(event) {

            this.isShowTooltip = event.currentTarget.scrollWidth <= event.currentTarget.clientWidth;

        },

    }

}

</script>

<style scoped>

.dialog {

    position: relative;

}

button[data-v-0d7ae0fd][data-v-0d7ae0fd] {

    width: 21px;

    height: 24px;

    position: absolute;

    top: 8px;

    right: 10px;

    transform: translate(50%, -50%);

}

button {

    position: absolute;

    top: 0;

    right: 0;

    transform: translate(50%, -50%);

}

.my_draggle {

    /* width: 145%; */

    display: flex;

    /* justify-content:space-between; */

    margin: 10px 0;

}

.md_title {

    font-size: 24px;

    height: 60px;

}

#Id_mdc_right {

    display: flex;

    flex-direction: column;

    margin-left: 20px;

    height: 430px;

    width: 100%;

}

.mdc_left {

    width: 200px;

    height: 400px;

    display: inline-block;

    border: 1px solid #CCCCCC;

    /* border-radius: 10px; */

    vertical-align: top;

    overflow-y: auto;

}

.mdc_right {

    flex: 1;

    width: 100%;

    display: inline-block;

    border: 1px solid #CCCCCC;

    overflow-y: auto;

    /* border-radius: 10px; */

    vertical-align: top;

    margin-bottom: 5px;

}

.mdc_left>div {

    height: 30px;

    line-height: 30px;

    cursor: move;

    padding: 0 10px;

}

.mdc_left>div:hover {

    background-color: #cccccc;

}

.mdc_right>div {

    height: 20px;

    line-height: 20px;

    margin-top: 6px;

    cursor: move;

}

.mdc_right>div:hover {

    background-color: #CCCCCC;

}

delName .mdc_right>div>span {

    display: inline-block;

    vertical-align: top;

}

.mdc_right>div>span>img {

    height: 15px;

}

.word {

    font-size: 18px;

    font-weight: bold;

    margin: 5px 0 10px 5px;

}

.delIcon {

    /* color: #97d9f8; */

    margin-right: 10px;

    margin-top: 9px;

    color: red;

}

.delName {

    margin-left: 10px;

}

.over-ellipsis {

    display: block;

    width: calc(100%);

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

}</style>