vue 3 + element UI 使用vuedraggable实现从左往右拖拽至表格

使用vue版本：vue@3.2.37

使用vuedraggable版本：vuedraggable@4.1.0

引用了如下脚本：

<script src="~/lib/vue/vue.global.min.js"></script>
<link href="~/lib/element-plus/index.css" rel="stylesheet" />
<script src="~/lib/element-plus/index.full.js"></script>
<script src="~/lib/element-plus/locale/en.js"></script>
<script src="~/lib/element-plus/locale/zh-cn.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/sortablejs/Sortable.min.js"></script>
<script src="~/lib/vuedraggable/dist/vuedraggable.umd.min.js"></script>

实现效果如下图：

 

 

代码实现：

<style>
    .itxst {
        margin: 10px;
        text-align: left;
    }

    .col {
        width: 40%;
        flex: 1;
        padding: 10px;
        border: solid 1px #eee;
        border-radius: 5px;
        float: left;
    }

    .col2 {
        width: 60%;
        flex: 1;
        padding: 10px;
        border: solid 1px #eee;
        border-radius: 5px;
        float: left;
    }


    .col + .col {
        margin-left: 10px;
    }

    .item {
        padding: 6px 12px;
        margin: 0px 10px 0px 10px;
        border: solid 1px #eee;
        background-color: #f1f1f1;
        text-align: left;
    }

        .item + .item {
            border-top: none;
            margin-top: 6px;
        }

        .item:hover {
            background-color: #fdfdfd;
            cursor: move;
        }

    .item2 {
        padding: 6px 12px;
        margin: 0px 10px 0px 10px;
        border: solid 1px #eee;
        background-color: pink;
        text-align: left;
    }

        .item2 + .item2 {
            border-top: none;
            margin-top: 6px;
        }

        .item2:hover {
            outline: solid 1px #ddd;
            cursor: move;
        }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>
<div id="app">
    <!--使用draggable组件-->
    <div class="itxst">
        <div style="padding-left:6px">往右边拖动试试看</div>
        <div class="col">
            <draggable :list="arr1" ghost-class="ghost" :force-fallback="true" animation="300" :group="groupA" sort="false">
                <template #item="{ element }">
                    <div class="item">
                        {{ element.value }}
                    </div>
                </template>
            </draggable>
        </div>
        <div class="col2">
            <el-table :data="tableData"
                      current-row-key="id"
                      style="width: 100%">
                <el-table-column prop="date" label="日期" width="180"></el-table-column>
                <el-table-column label="姓名" width="180">
                    <template v-slot="scope">
                        <draggable :list="scope.row.name" ghost-class="ghost" :force-fallback="true" animation="300" group="itxst" @@add="addarr2(scope.row.id,scope.row.name)">
                            <template #item="{ element }">
                                <el-tag :key="element.id"
                                        closable
                                        :disable-transitions="false"
                                        @@close="handleRemove(scope.row.name,element)">
                                    {{element.value}}
                                </el-tag>
                            </template>
                        </draggable>
                        <el-autocomplete class="input-new-tag" ref="saveTagInput"
                                         size="small" v-if="scope.row.inputVisible"
                                         v-model="scope.row.inputValue"
                                         :fetch-suggestions="querySearch"
                                         clearable 
                                         @@trigger-on-focus="false"
                                         @@select="handleSelect($event,scope.row.name,scope.row.id)"></el-autocomplete>
                        <el-button v-else class="button-new-tag" :key="scope.row.id" size="small" @@click="showInput(scope.row.id)">+ New Tag</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
        </div>
    </div>
</div>

<script type="text/javascript">
    var Main = {
        data() {
            return {
                arr1: [
                    { id: 1, value: '王小虎' },
                    { id: 2, value: '王二虎' },
                    { id: 3, value: '张三' },
                    { id: 4, value: '赵四' },
                    { id: 5, value: '一甲' }
                ],
                tableData: [
                    {
                        id: "1",
                        date: "2022-08-02",
                        name: [
                            { id: 1, value: '王小虎' },
                            { id: 2, value: '王二虎' },
                        ],
                        address: "深圳市龙岗坂田街道21号",
                        inputValue: "",
                        inputVisible: false,
                    },
                    {
                        id: "2",
                        date: "2022-08-04",
                        name: [],
                        address: "深圳市龙岗坂田街道22号",
                        inputValue: "",
                        inputVisible: false,
                    },
                    {
                        id: "3",
                        date: "2022-08-01",
                        name: [],
                        address: "深圳市龙岗坂田街道21号",
                        inputValue: "",
                        inputVisible: false,
                    },
                    {
                        id: "4",
                        date: "2022-08-03",
                        name: [],
                        address: "深圳市龙岗坂田街道21号",
                        inputValue: "",
                        inputVisible: false,
                    }
                ],
                moveId: -1,
                groupA: {
                    name: 'itxst',
                    pull: 'clone',
                    put: false,
                },
                restaurants: [],
            };
        },
        //注册draggable组件
        components: {
            'draggable': window.vuedraggable
        },
        mounted() {
            this.restaurants = this.loadAll();
        },
        methods: {
            loadAll() {
                return this.arr1;
            },
            //左边往右边拖动时的事件
            addarr2(_id, _data, e) {
                const map = new Map()
                const qc = _data.filter(item => !map.has(item.id) && map.set(item.id, 1))
                for (var i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i].id == _id) {
                        this.tableData[i].name = qc;
                        break;
                    }
                }
            },
            handleRemove(datalist,tag) {
                datalist.splice(datalist.indexOf(tag), 1);
            },
            showInput(_id) {
                for (var i = 0; i < this.tableData.length; i++) {
                    if (this.tableData[i].id == _id) {
                        this.tableData[i].inputVisible = true;
                        break;
                    }
                }
            },            
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item, datalist, _id) {
                if (item) {
                    datalist.push(item);
                    const map = new Map()
                    const qc = datalist.filter(item => !map.has(item.id) && map.set(item.id, 1))
                    for (var i = 0; i < this.tableData.length; i++) {
                        if (this.tableData[i].id == _id) {
                            this.tableData[i].name = qc;
                            this.tableData[i].inputValue = "";
                            this.tableData[i].inputVisible = false;
                            break;
                        }
                    }
                }
            }
        },
    };

    const app = Vue.createApp(Main);
    app.use(ElementPlus)
    const reportDataVM = app.mount("#app");

</script>