vue实现拖拽排序、移除

最新推荐文章于 2024-08-08 08:32:30 发布

ROBIN_uuo

最新推荐文章于 2024-08-08 08:32:30 发布

阅读量844

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ROBIN_uuo/article/details/122127289

版权

本文介绍了如何在Vue.js应用中使用vuedraggle组件来实现拖拽排序和移除功能。通过实例展示了在单行和双列布局下，组件的流畅操作，并强调了设置相同group属性以实现不同栏间的交互。

摘要由CSDN通过智能技术生成

vue实现拖拽排序、可用于图片、模块交换位置

效果
以“首页模块”为例

效果

录屏软件很卡，实际效果是非常流畅的
录屏软件很卡，实际效果还是非常流畅的

以“首页模块”为例

本质都一样，只不过一个是单行、一个是双列，使用的是vuedraggle组件vuedraggle
draggable就是组件，两个组件都写同一个group，则两栏可以互相拖拽，list绑定对应的数据源

				// 左边栏
              <div style="float: left">
                <draggable
                    animation="300"
                    group="module"
                    :list="form.left">
                  <div class="left" :style="{height: leftModuleHeight}" v-for="(item,index) in form.left"
                       v-model="form.left[index]">
                    <span class="text-option">{
   {
    item.name }}</span>
                    <i class="el-icon-error"
                       style="color: red;font-size: 20px;display: flex;margin-top: -55px;margin-left: 190px;cursor: pointe