vuedraggable -- 实现拖拽排序

最新推荐文章于 2024-04-25 14:04:28 发布
最新推荐文章于 2024-04-25 14:04:28 发布
阅读量338 收藏 1
点赞数
分类专栏： vue-个人杂记 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44754351/article/details/106691504
版权

参考： https://sortablejs.github.io/Vue.Draggable/#/custom-clone

HTML：
	<div class="rule-body">
            <el-row>
                <el-col :span="6">
                    <div class="rule-body-left">
                        <div class="rule-body-title">可选字段:</div>
                        <draggable class="list-group" :list="unChooseFields" group="Arvin" @change="log">
                            <div class="list-group-item" v-for="(element, index) in unChooseFields" :key="element.ruleId">
                                {{ element.name || '' }}
                            </div>
                        </draggable>
                    </div>
                </el-col>
                <el-col :span="2" class="rule-body-middle">
                    <div>
                        <img src="@/assets/拖拽.png" alt=""> <br>
                        <span>左右拖拽</span>
                    </div>
                </el-col>
                <el-col :span="16">
                    <div class="rule-body-right">
                        <div class="rule-body-title">已选字段:</div>
                        <draggable class="list-group" :list="choosedFields" group="Arvin" @change="log">
                            <div v-for="(element, index) in choosedFields" :key="element.ruleId">
                                <el-row :gutter="40" v-if="element.ruleId==7" class="list-group-form-item">
                                    <el-col :span="7" align="right">
                                        <div class="element-name">{{element.name}}</div>
                                    </el-col>

                                    <el-col :span="15" align="left">
                                        <el-select placeholder="" v-model="element.connector" style="width: 80px;">
                                            <el-option label="无" value=""></el-option>
                                            <el-option label="_" value="_"></el-option>
                                            <el-option label="-" value="-"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>

                                <!--自定义前缀-->
                                <el-row :gutter="40" v-if="element.ruleId==8" class="list-group-form-item">
                                    <el-col :span="7" align="right">
                                        <div class="element-name">{{element.name}}</div>
                                    </el-col>

                                    <el-col :span="15" align="left">
                                        <el-input placeholder="请输入" clearable v-model.trim="element.value" maxlength='8'show-word-limit @change="customChange" style="width: 200px;"></el-input>
                                        <span>&nbsp;&nbsp;&nbsp;</span>
                                        <el-select placeholder="" v-model="element.connector" style="width: 80px;">
                                            <el-option label="无" value=""></el-option>
                                            <el-option label="_" value="_"></el-option>
                                            <el-option label="-" value="-"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="40" v-if="element.ruleId==6" class="list-group-form-item">
                                    <el-col :span="7" align="right">
                                        <div class="element-name">{{element.name}}</div>
                                    </el-col>

                                    <el-col :span="15" align="left">
                                        <el-select placeholder="" v-model="element.connector" style="width: 80px;">
                                            <el-option label="无" value=""></el-option>
                                            <el-option label="_" value="_"></el-option>
                                            <el-option label="-" value="-"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </div>
<!--  加入插槽解决流水号禁止拖拽问题-->
                            <div
                                slot="footer"
                                class="btn-group"
                                role="group"
                                aria-label="Basic example"
                            >
                                <!--流水号-->
                                <el-row :gutter="40" class="serialNumberCurse">
                                    <el-col :span="7" align="right" >
                                        <span class="serialNumberObj-span">{{serialNumberObj.name}}</span>
                                        <el-tooltip placement="bottom">
                                            <div slot="content">
                                                【小流水号】不同的编码前缀，流水号分别从1开始独立计算<br/>
                                                【大流水号】不管前缀如何变化，从当前流水号最大值开始，持续累加
                                            </div>
                                            <i class="el-icon-warning" style="line-height: 32px;margin-left: 5px"></i>
                                        </el-tooltip>
                                    </el-col>

                                    <el-col :span="15" align="left">
                                        <el-select placeholder="" v-model="serialNumberObj.value" @change="serialNumberChange" style="width: 80px;">
                                            <el-option label="3" value="3"></el-option>
                                            <el-option label="4" value="4"></el-option>
                                            <el-option label="5" value="5"></el-option>
                                            <el-option label="6" value="6"></el-option>
                                            <el-option label="7" value="7"></el-option>
                                            <el-option label="8" value="8"></el-option>
                                        </el-select>
                                        <span>&nbsp;&nbsp;&nbsp;</span>
                                        <el-select placeholder="" v-model="serialNumberObj.type" style="width: 100px;">
                                            <el-option label="小流水号" value="0"></el-option>
                                            <el-option label="大流水号" value="1"></el-option>
                                        </el-select>
                                    </el-col>
                                </el-row>
                            </div>
                        </draggable>
                    </div>
                </el-col>
            </el-row>
        </div>

在这里插入图片描述

Arvin-wm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue——vuedraggable拖拽组件使用文档总结
月来better
04-01 12万+
Draggable为基于Sortable.js的vue组件，用以实现拖拽功能。 关于Vue.Draggable详细信息可以查看Github地址 特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间的拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2的国度动画兼容 支持撤销操作 当需要完全控制时，可以抛出所有变化 可以和现有的UI组件兼容 安装 npm install vuedraggable 引入 import draggable from 'vuedraggable'
记录Vue.Draggable拖拽组件的使用历程
Mr.小灰狼_随笔
07-07 1万+
记录Vue.Draggable使用历程 Vue.Draggable 是一款基于 Sortable.js 实现的 vue 拖拽插件。 支持 移动设备、拖拽 和 选择文本、智能滚动 ， 可以在 不同列表间 拖拽、不依赖 jQuery 为基础、vue 2 过渡动画兼容、支持撤销操作 ， 总之是一款非常优秀的 vue拖拽组件 。.........
【vue拖拽列表】Vue.Draggable
最新发布
qq_45852108的博客
04-25 373
拖拽列表
vue中使用vue-draggable教程
jsmeng626的博客
06-13 4305
Vue-draggable是一个基于Vue.js的可拖拽组件库，可以方便地实现拖拽排序、拖拽交换等功能。
vue项目中使用vuedraggable进行简单拖拽
m0_52477297的博客
06-13 3000
平时工作都在使用禅道，感觉这个拖拽效果还不错，决定按照官网敲一下所有技术：vue + vuedraggable拖动的实现基于 vuedraggable的插件开发。
vue项目中使用vuedraggable
热门推荐
小菜吉的博客
04-11 2万+
最近在学习一个可视化搭建的项目，里面用的拖拽就是draggable.js。看了几个中文的文档，有很多坑，可能是没有及时更新的原因。 建议去看vuedraggable的官方文档，只不过是英文的。官方文档：https://github.com/SortableJS/Vue.Draggable； 由于vue3已经是默认版本了，所以vuedraggable也对应vue2.0和3.0有各自的版本，直接使用基本命令安装： npm install vuedraggable --save 会默认安装2.1左右的
vuedraggable+element ui实现页面控件拖拽排序效果
10-17
主要为大家详细介绍了vuedraggable+element ui实现页面控件拖拽排序效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
10-15
主要介绍了Vue 基于 vuedraggable 实现选中、拖拽、排序效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并...
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
10-16
主要介绍了利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
由vue2版本升级vue3版本遇到的问题
Amelia_Liu的博客
03-22 1285
1、vue3+vuedraggable报错TypeError: Cannot read properties of undefined (reading ‘updated’)：这个一般是因为插件使用语法有问题，vue3版本的插件使用时，v-for不能。2、报错 draggable element must have an item slot：这报错也是因为没有写item插槽，按照上面的语法写了插槽后，这报错就能解决。4. 切记注意，这个单词是不可以修改的,必须是element,不然无法识别(坑大了)
基于Vue快速实现列表拖拽排序——draggable
qq_37831545的博客
09-27 1209
在业务中列表拖拽排序是比较常见的需求，常见的JS拖拽库有Sortable.js，Vue.Draggable等，大多数同学遇到这种需求也是更多的求助于这些JS库，其实，使用HTML原生的拖放事件来实现拖拽排序并不复杂，结合Vue的transition-group,还能快速的给排序添加过渡动画。
使用draggable组件实现拖拽自定义表格
qq_53675083的博客
07-09 1134
主要是为了给表格自定义功能添加设置项，拖拽行的位置改变更保存给后端更新页面，实现表格的前后位置变换及宽度自定义 上代码
vue中拖拽组件使用------vuedraggable
喂、你别跑啊~
12-30 3049
1、安装 cnpm i -S vuedraggable 2、使用 import draggable from "vuedraggable"; 3、代码 <template> <section class="main"> <div class="crumbs"> <el-breadcrumb separator="/...
vue.draggable拖拽生成课程表
yolo_link的博客
06-29 2680
根据数据源提供的科目及教师信息，拖拽至空白课表内，生成一份课表。首先科目有多个，教师也有多个。数据源部分做一个切换选择科目的效果，选取科目后，提供科目及授课人名字。课表可以是一张空白课表，也可以默认指定某日某节某人某课。 课表使用表格呈现，这样区域方便划分。 表头是工作日，表体部分的第一列是节次。为了更方便查看，最左边设计上中下午段的划分。拖拽效果有比较成熟的组件库了：Vue-Draggable。 它是基于Sortable.js实现的，适用vue项目，可以在pc端使用也可以在移动端使用......
Vue3 使用 vuedraggable
lhz_333的博客
03-10 2万+
本文主要记录下vuedraggable 在 vue2 和 vue3 中使用上的区别。
ant design table vue table 拖拽排序
weixin_44074671的博客
10-19 1496
ant design table vue table 拖拽排序
vuedraggable嵌套块拖拽_请教 vue draggable 拖拽问题
weixin_33104731的博客
12-30 1105
v-for="i in item":key="i":style="'width:' + Math.round(i / 750 * 10000) / 100.00 + '%'">{{i}}import draggable from "vuedraggable";export default {components: { draggable },data() {return {rowspan: ...
vuedraggable嵌套块拖拽_vuedraggable 拖拽 应用 不同列表之间的拖拽
weixin_39762838的博客
12-20 354
{{item.name}}银行排序注：可拖动银行进行排序展示{{i}}、{{a.name}}银行卡片排序v-model="searchForm.bankId"placeholder="请选择"@change="getCardListByBankId">v-for="(item,index)inbanks":key="index":label="item.name":value="ite...
vuedraggable-es
03-12
vuedraggable-es是一个基于Vue.js的拖拽排序组件，它提供了一种简单而灵活的方式来实现拖拽排序功能。通过使用vuedraggable-es，你可以轻松地创建可拖拽的列表，使用户可以自由地重新排序列表中的项目。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值