循环渐进的玩转拖拽vue-draggable-plus

我们在做分组拖拽的时候，会用到VueDraggable，它是基于Sortablejs , 但我们想实现一些功能，可能很难在它的文档上找到相应的api，所以下面使用几个需求(双组拖拽，大小限制，头部尾部默认项，)，深度理解这个VueDraggable组件库的用法

官方文档：

https://alfred-skyblue.github.io/vue-draggable-plus/guide/

下面例子基于vue3.0 setup组件

首先我们实现一个简单的双列表拖拽排序

下载引入

import { VueDraggable } from 'vue-draggable-plus'

<template>
    <div class="conatiner">
        <div class="left">
            <VueDraggable v-model="list1" animation="1000" ghostClass="ghost" group="people">
                <div v-for="item in list1" :key="item.id" class="item mover">
                    {{ item.name }}
                </div>
            </VueDraggable>
        </div>
        <div class="right">
            <VueDraggable v-model="list2" group="people" animation="1000" ghostClass="ghost">
                <div v-for="item in list2" :key="item.id" class="item mover">
                    {{ item.name }}
                </div>
            </VueDraggable>
        </div>
    </div>
</template>
  
<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list1 = ref([
    {
        name: '巴适的板',
        id: '1'
    },
    {
        name: '劳资蜀道山',
        id: '2'
    },
    {
        name: '雄起',
        id: '3'
    },
    {
        name: '弯脚杆',
        id: '4'
    }
])
const list2 = ref([
    {
        name: '火锅',
        id: '1-1'
    },
    {
        name: '串串',
        id: '2-2'
    },
    {
        name: '钵钵鸡',
        id: '3-3'
    },
    {
        name: '夺夺粉',
        id: '4-4'
    }
])
</script>

<style lang="less">
.conatiner {
    display: flex;
    justify-content: space-evenly;

    >div {
        border: 1px solid rgb(237, 199, 199);
        min-width: 300px;
    }


    .item {
        cursor: pointer;
        margin: 10px;
        border: 1px solid #e6e6ff;

    }

    .graggable {
        min-width: 300px;
    }

    .footer {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}
</style>

其中属性含义 ：

• v-model // 数据源
• animation=“1000” // 动画
• group=“people”// 分组，相同名称可以相互拖拽

效果图

下面我们加一个拖拽限制，第二个盒子超过5个就拒绝拖拽进入该盒子

配置：

:group="{ name: 'people', pull: true, put: list2.length < 5 }"

template改变如下：

<template>
    <div class="conatiner">
        <div class="left">
            <VueDraggable v-model="list1" animation="1000" ghostClass="ghost" group="people">
                <div v-for="item in list1" :key="item.id" class="item mover">
                    {{ item.name }}
                </div>
            </VueDraggable>
        </div>
        <div class="right">
            <VueDraggable v-model="list2" :group="{ name: 'people', pull: true, put: list2.length < 5 }" animation="1000"
                ghostClass="ghost">
                <div v-for="item in list2" :key="item.id" class="item mover">
                    {{ item.name }}
                </div>
            </VueDraggable>
        </div>
    </div>
</template>

效果图：

下面我们在拖拽下加一个默认底部

作用：默认底部不支持拖拽，满足默写需求，另外当拖拽容器内没有拖拽元素时也可以拖拽进入

template变化如下：

<template>
    <div class="conatiner">
        <div class="left">
            <VueDraggable v-model="list1" animation="1000" class="graggable" ghostClass="ghost" draggable=".mover"
                :group="{ name: 'people', pull: true, put: true }" @update="onUpdate" @add="onAdd" @remove="remove">

                <div v-for="item in list1" :key="item.id" class="item mover">
                    {{ item.name }}
                </div>
                <div class="footer">
                    尾部
                </div>
            </VueDraggable>
        </div>
        <div class="right">
            <VueDraggable v-model="list2" class="graggable" :group="{ name: 'people', pull: true, put: list2.length < 6 }"
                :options="{ preventOnFilter: false }" animation="1000" ghostClass="ghost" @update="onUpdate" @add="onAdd"
                @remove="remove">
                <div v-for="item in list2" :key="item.id" class="item mover">
                    {{ item.name }}
                </div>
                <div class="footer">
                    尾部
                </div>
            </VueDraggable>
        </div>
    </div>
</template>

加一些底部css样式

<style lang="less">
.conatiner {
    display: flex;
    justify-content: space-evenly;

    >div {
        border: 1px solid rgb(237, 199, 199);
        min-width: 300px;
    }


    .item {
        cursor: pointer;
        margin: 10px;
        border: 1px solid #e6e6ff;

    }

    .graggable {
        min-width: 300px;
    }

    .footer {
        padding-top: 30px;
        padding-bottom: 30px;
    }
}
</style>

效果图：

好了，上面就是VueDraggable的隐藏用法了，如果你还有更多的需求可以查阅

http://www.sortablejs.com/options.html

因为该组件是基于Sortable.js,所以配置也可以传入进去，
如果有帮助到你的话，点个赞再走吧！感谢