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]