vue 3 使用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;
    }

        .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;
        }
</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.name }}
                    </div>
                </template>
            </draggable>
        </div>
        <div class="col">
            <draggable :list="arr2" ghost-class="ghost" :force-fallback="true" animation="300" group="itxst" @@add="addarr2" @@remove="remove2">
                <template #item="{ element }">
                    <div class="item">
                        {{ element.name }}
                    </div>
                </template>
            </draggable>
        </div>
        <div class="col">
            <draggable :list="arr3" ghost-class="ghost" :force-fallback="true" animation="300" group="itxst" @@add="addarr3" @@remove="remove3">
                <template #item="{ element }">
                    <div class="item">
                        {{ element.name }}
                    </div>
                </template>
            </draggable>
        </div>
    </div>
</div>

<script type="text/javascript">  
    var Main = {
        data() {
            return {
                //定义要被拖拽对象的数组
                arr1: [
                    { id: 1, name: '菜单1' },
                    { id: 2, name: '菜单2' },
                    { id: 3, name: '菜单3' },
                    { id: 4, name: '菜单4' },
                    { id: 5, name: '菜单5' }
                ],
                arr2: [
                    { id: 11, name: '常用菜单' },
                ],
                arr3: [
                    { id: 12, name: '常用菜单2' },
                ],
                moveId: -1,
                groupA: {
                    name: 'itxst',
                    pull: 'clone',
                    put: false,
                },                
            };
        },
        //注册draggable组件
        components: {
            'draggable': window.vuedraggable
        },
        methods: {
            //左边往右边拖动时的事件
            addarr2(e) {
                const map = new Map()
                const qc = this.arr2.filter(item => !map.has(item.id) && map.set(item.id, 1))
                this.arr2 = qc;
            },
            addarr3(e) {
                const map = new Map()
                const qc3 = this.arr3.filter(item => !map.has(item.id) && map.set(item.id, 1))
                this.arr3 = qc3;
            },
            //move回调方法
            remove2(e, originalEvent) {
                console.log(e.relatedContext.element);
                this.arr2.$remove(e.relatedContext.element)
                this.arr3.$remove(e.relatedContext.element)
            },
        },
    };

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

</script>