vue2 + vuedraggable实现卡片拖拽排序效果

最新推荐文章于 2025-04-17 11:20:23 发布

momo_root

最新推荐文章于 2025-04-17 11:20:23 发布

阅读量636

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue2 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.youkuaiyun.com/weixin_54526156/article/details/133089427

vue2 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用vuedraggable库实现列表项的拖拽排序，包括引入库、组件绑定和事件处理。作者提到原生Vue拖拽功能未深入研究，但vuedraggable易于上手且配合a-card卡片使用方便。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

记录一下拖拽排序的方法，以后可能会用到，找了好多方法，最后用了 vuedraggable，看资料，vue也有原生的拖拽，这个没有看过，有时间会研究一下，原生的可能更简单（只是我想的）。但是vuedraggable也不难。网上也有很多资料。
直接上代码，全部的代码都在这了。
第一步，肯定是 npm i -S vuedraggable 啦
第二步直接在页面引入。见下方代码

<template>
    <div class="draggable">
        <Draggable v-model="tableData" animation="500" @start="onStart" @end="onEnd">
            <a-card v-for="(item, index) in tableData" :key="index" class="ck-content-common">
                <p>{{item.name}}</p>
                <p>Card content</p>
                <p>Card content</p>
            </a-card>
        </Draggable>
    </div>
</template>
<script>
import Draggable from 'vuedraggable';
export default {
    components: { Draggable },
    data() {
        return {
            tableData: [
                {
                    name: '0',
                    test: '0'
                },
                {
                    name: '1',
                    test: '1'
                },
                {
                    name: '2',
                    test: '2'
                },
                {
                    name: '3',
                    test: '3'
                },
                {
                    name: '4',
                    test: '4'
                },
                {
                    name: '5',
                    test: '5'
                },
                {
                    name: '6',
                    test: '6'
                },
                {
                    name: '7',
                    test: '7'
                },
                {
                    name: '8',
                    test: '8'
                },
                {
                    name: '9',
                    test: '9'
                }
            ]
        };
    },
    methods: {
        onStart({item,oldIndex}) {
            console.log('开始拖拽',item,oldIndex);
            console.log('原来的数据',this.tableData)
        },
        onEnd({item,newIndex}) {
            console.log('结束拖拽',item,newIndex);
            console.log('之后的数据',this.tableData)
        }
    }
};
</script>
<style scoped>
.draggable {
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: row;
}
.ck-content-common {
    border: 1px solid #e8e8e8;
    display: inline-block;
    margin: 10px;
}
</style>