1

我正在使用以下库 https://sortablejs.github.io/Vue.Draggable/#/custom-clone

具体使用示例： https ://github.com/SortableJS/Vue.Draggable/blob/master/example/components/clone-on-control.vue

<template>
    <v-container fluid>
        <div class="row">
            <div class="col-3">
            <h3>Draggable 1</h3>
            <draggable
                class="row wrap fill-height align-center sortable-list"
                style="background: red;"
                :list="list1"
                :group="{ name: 'people', pull: pullFunction }"
                @start="start"
            >
                <v-card class="list-group-item" v-for="element in list1" :key="element.id">
                {{ element.name }}
                </v-card>
            </draggable>
            </div>

            <div class="col-3">
            <h3>Draggable 2</h3>
            <draggable class="dragArea list-group" :list="list2" group="people">
                <v-card class="list-group-item" v-for="element in list2" :key="element.id">
                {{ element.name }}
                </v-card>
            </draggable>
            </div>
        </div>
</template>
<script>
import draggable from "vuedraggable";
export default {
    components: {
        draggable
    },
    data(){
        return {
            list1: [
                { name: "Jesus", id: 1 },
                { name: "Paul", id: 2 },
                { name: "Peter", id: 3 }
            ],
            list2: [
                { name: "Luc", id: 5 },
                { name: "Thomas", id: 6 },
                { name: "John", id: 7 }
            ],
            controlOnStart: true
        }
    },
    methods:{
        pullFunction() {
            return this.controlOnStart ? "clone" : true;
        },
        start({ originalEvent }) {
            this.controlOnStart = originalEvent.ctrlKey;
        }
    }   
}
</script>

我需要做的只是填充一个列表，即从 Draggable 1 到 Draggable 2，目前是从 Draggable 1 到 Draggable 2 以及从 Draggable 2 到 Draggable 1 但我不需要那样。

谢谢

4

0 回答 0