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

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------- |---------- |------------- |-------- | | list | 渲染列表 | Array | - | [] | | config.name | 跨列表关联名 | string | - | '' | | config.uuidField | 唯一属性字段名 | string | - | 'id' | | config.push | 当前列表是否支持从其他列表push元素进来 | boolean | — | true | | config.pull | 将当前列表的某个元素拖拽并添加到其他列表里，该元素是否从当前列表移除 | boolean | — | true | | config.exchange | 当前列表元素之间是否支持交换位置 | boolean | — | true |

Events

| 事件名称 | 说明 | 回调参数 | |---------|---------|---------| | drag-start | - | index | | drag-enter | - | index | | drag-over | - | index | | drag-end | - | — |

交流 [email protected]