vue2使用vuedraggable组件实现拖拽排序的功能

场景:

        实现拖拽排序

效果图:

vue2实现拖拽排序效果

安装:

# 使用 npm 安装
npm install vuedraggable --save
 
# 使用 yarn 安装
yarn add vuedraggable

注册使用:


import draggable from 'vuedraggable';


、、、
components:{draggable}

代码:

<draggable v-model="hyjgChecklistItems" :options="{ handle: '.drag-handle', animation: 200 }">
                    <div v-for="item in hyjgChecklistItems" style="margin-bottom: 20px;">
                        <span class="drag-handle">大项名称:</span><el-input placeholder="请输入大项" v-model="item.name" style="width: 50%;"></el-input>
                        <el-button type="danger" icon="el-icon-delete" size="small"
                            @click="delName(item)">删除</el-button>
                        <el-button type="primary" icon="el-icon-plus" size="small" circle
                            @click="addItem(item)"></el-button>

                        <!-- <div>
                        显示顺序:<el-input-number v-model="item.sort" :min="1" :max="10"></el-input-number>
                        <el-button @click="addItem(item)">+新增小项</el-button>
                    </div> -->

                        <draggable v-model="item.children" :options="{ handle: '.drag-handle',  animation: 200 }">
                            <div v-for="item2 in item.children" style="padding-left: 50px;margin-top: 10px;">
                                <span class="drag-handle">小项名称:</span> <el-input placeholder="请输入小项" v-model="item2.item" style="width: 60%;"></el-input>
                                <el-button type="danger" icon="el-icon-minus" size="mini" circle
                                    @click="delItem(item, item2)"></el-button>
                            </div>
                        </draggable>
                    </div>
                </draggable>

这里组件是可以嵌套使用的,但是要注意给组件添加options属性,添加handle,指定可拖拽元素。

v-model绑定的是可拖拽元素的列表。

以上便实现了图示中的效果,较为详细配置说明可参考:

VueDraggable插件使用-CSDN博客

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值