Question

我正在使用以下库 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，但是我不需要那样。

谢谢

Answer 1

SortableJs提供了很好的示例，并带有示例代码说明了如何实现此目标。请看一下他们的克隆演示：Vue.Draggable/#/clone

它的源代码也可以从Vue.Draggable examples

中找到

希望有帮助！

如何仅使用vuedraggable填写一个列表？

1 个答案: