vue-light-drag v1.1.1

vue-light-drag

Lightweight drag and drop components

install

yarn add vue-light-drag 或者 npm install vue-light-drag

引入

import Vue from 'vue';
import Drag from 'vue-light-drag';

Vue.use(Drag);

demo

<template>
    <div>
        <Drag
            style="width: 200px"
            :list="list1"
            :config="config1"
        >
            <template v-slot="{ item }">
                <div class="item">
                    {{ item.name }}
                </div>
            </template>
        </Drag>

        <Drag
            style="width: 200px"
            :list="list2"
            :config="config2"
        >
            <template v-slot="{ item }">
                <div class="item">
                    {{ item.name }}
                </div>
            </template>
        </Drag>
    </div>
</template>

<script>
export default {
    name: 'App',

    data() {
        return {
            list1: new Array(10).fill(0).map((_, i) => ({
                name: `列表1 - ${i + 1}`,
                draggable: true,
            })),

            config1: {
                name: 'test',
                push: true,
                pull: true,
                exchange: true,
            },

            list2: new Array(10).fill(0).map((_, i) => ({
                name: `列表2 - ${i + 1}`,
                draggable: true,
            })),

            config2: {
                name: 'test',
                push: true,
                pull: true,
                exchange: true,
            },
        };
    },
};
</script>

Attributes

Events

交流 1215901037@qq.com