vue + vuedraggable 实现拖拽排序

最新推荐文章于 2025-06-17 14:15:00 发布

aithena

最新推荐文章于 2025-06-17 14:15:00 发布

阅读量1.4w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： Vue.Draggable vuedraggable vue拖拽排序

本文链接：https://blog.youkuaiyun.com/aithena/article/details/88049285

vue 专栏收录该内容

25 篇文章

订阅专栏

本文介绍如何在Vue.js项目中安装并使用Vue.Draggable组件，实现元素的拖拽排序功能。通过npm安装，引入并在组件中注册Vue.Draggable，设置v-model和options选项来定制拖拽行为。

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

安装

npm install vuedraggable

引入

import draggable from 'vuedraggable'

components: {
    draggable
}

html

<draggable
    class="list"
    v-model="modules"
    :clone="clone"
    :options="{
        group: {
            name: 'layout',
            pull: 'clone',
            put: false
        },
        draggable: '.item',
        forceFallback: true,
        sort: false,
        animation: 50
    }">
    <transition-group tag="ul">
        <li
            v-for="(item, index) in modules"
            :key="index"
            class="item">
            <div class="holder">
                <img :src="item.icon" />
                <h3>{{item.text}}</h3>
            </div>
        </li>
    </transition-group>
</draggable>