vue.draggable.next sort 例子

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>vue.draggable.next sort 例子</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="https://www.itxst.com/package/vue3/vue.global.js"></script>
    <script src="https://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="https://www.itxst.com/package/vuedraggablenext/vuedraggable.umd.min.js"></script>
</head>

<body>
    <div id="app">
        <div class="msg">{{ message }}</div>
        <div class="itxst">
            <div class="group">
                <draggable :list="modules.arr1" ghost-class="ghost" handle=".move" filter=".forbid"
                    :force-fallback="true" chosen-class="chosenClass" animation="300" group="itxst"
                    :fallback-class="true" :fallback-on-body="true" :move="onMove" :sort="false">
                    <template #item="{ element }">
                        <div class="item move">
                            <label class="move">{{ element.name }}</label>
                            <span v-html="element.name == 'A组' ? 'www.itxst.com' : '内容....'"></span>
                        </div>
                    </template>
                </draggable>
            </div>
            <div class="group">
                <draggable :list="modules.arr2" ghost-class="ghost" handle=".move" filter=".forbid"
                    :force-fallback="true" chosen-class="chosenClass" animation="300" group="itxst"
                    :fallback-class="true" :fallback-on-body="true" :move="onMove">
                    <template #item="{ element }">
                        <div class="item move">
                            <label class="move">{{ element.name }}</label>
                            <span>内容....</span>
                        </div>
                    </template>
                </draggable>
            </div>
        </div>
    </div>
    <script>
        const app = {
            data() {
                return {
                    message: "A组只能往B组，不允许排序",
                    modules: {
                        arr1: [
                            { name: "A组", id: 1, disabledPark: true },
                            { name: "C#", id: 2 },
                            { name: "Java", id: 3 },
                            { name: "PHP", id: 4 },
                        ],
                        arr2: [
                            { name: "B组", id: 5 },
                            { name: "员工", id: 6 },
                            { name: "报表", id: 7 },
                            { name: "库存", id: 8 },
                        ],
                    },
                }
            },
            //注册draggable组件
            components: {
                'draggable': window.vuedraggable
            },
            methods: {
                onSortA(e) { },
                //当插入、移除、改变位置时会触发该事件
                onSortB(e) {
                    console.log(e);
                    var that = this;
                    that.message = JSON.stringify(this.modules.arr2);
                    setTimeout(function () {
                        that.message = "A组只能往B组，不允许排序";
                    }, 2000);
                },
                onMove(e, originalEvent) {
                    var that = this;
                    //不允许停靠到A组的第一个元素
                    if (e.relatedContext.element.disabledPark == true) {
                        that.message = "不允许停靠到A组的第一个元素";
                        setTimeout(function () {
                            that.message = "A组只能往B组，不允许排序";
                        }, 2000);
                        return false;
                    }

return true;
                }
            }
        }
        Vue.createApp(app).mount('#app')
    </script>
    <style>
        body {
            padding: 0px;
            margin: 0px;
            background-color: #f1f1f1;
        }

.msg {
            padding: 10px 20px 0px 20px;
        }

.itxst {
            background-color: #f1f1f1;
            display: flex;
            padding: 20px;
        }

.group {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-content: center;
            width: 48%;
            margin-right: 20px;
        }

.item {
            border: solid 1px #ddd;
            padding: 0px;
            text-align: left;
            background-color: #fff;
            margin-bottom: 10px;
            display: flex;
            height: 36px;
            user-select: none;
        }

.item>label {
            padding: 6px 10px;
            color: #333;
        }

.item>label:hover {
            cursor: move;
        }

.item>span {
            padding: 6px 10px;
            color: #666;
        }

.ghost {
            border: solid 1px rgb(19, 41, 239) !important;
        }

.chosenClass {
            opacity: 1;
            border: solid 1px red;
        }

.fallbackClass {
            background-color: aquamarine;
        }
    </style>
</body>
</html>