vue3中使用Vuedraggable实现拖拽排序

原创已于 2024-06-06 09:40:51 修改 · 1.5k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2024-06-05 18:03:54 首次发布

直接上效果图

1.实现原理：使用了Vuedraggable

Vuedraggable是一个专为 Vue 打造的拖拽排序模块，基于 Sortablejs 封装，支持 Vue3 或 Vue2

2.安装：pnpm i -S vuedraggable@next

vue3一定要安装最新版的vuedraggable

3.代码（效果图是项目中的，代码是自己写的demo，效果都一样）

<template>
    <div class="drag-box">
        <Draggable :list="list" :animation="500" class="list-group" :forceFallback="true" chosen-class="chosenClass"
            @end="endAble">
            <template #item="{ element }">
                <div class="items" @click="clickDetail(element)">
                    <div class="title">{{ element.label }}</div>
                    <img :src="element.image" alt="" style="width: 100px;">
                </div>
            </template>
        </Draggable>
    </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import Draggable from "vuedraggable";

const list = reactive([
    {
        label: "模块1",
        id: 1,
        image: 'https://lupic.cdn.bcebos.com/20210629/3000005161_14.jpg'
    },{
        label: "模块2",
        id: 2,
        image: 'https://lupic.cdn.bcebos.com/20210629/3000005161_14.jpg'
    },{
        label: "模块3",
        id: 3,
        image: 'https://lupic.cdn.bcebos.com/20210629/3000005161_14.jpg'
    }]);
function endAble(e) {
    console.log(e);
}
function clickDetail(item) {
    console.log(item, '点击我');
}
</script>

<style scoped>
.list-group {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
}

.items {
    width: 200px;
    height: 200px;
    padding: 20px;
    background: #e3e3e3;
    border-radius: 8px;
    box-sizing: border-box;
    margin-right: 20px;
    margin-bottom: 20px;
}

</style>

标签