sortable获取拖拽后的数据_Vue.Draggable - 基于 Vue.js 丝般柔滑的拖拽排序组件

最新推荐文章于 2024-08-04 17:29:09 发布
最新推荐文章于 2024-08-04 17:29:09 发布
阅读量3.4k 收藏 1
点赞数
文章标签： sortable获取拖拽后的数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_35390057/article/details/113318216
版权
VueDraggable是一个基于Sortable.js的Vue增强组件，提供丝滑的拖拽排序功能，支持触摸设备、动画同步、撤销操作等。它与UI库兼容，如Ant Design和Element，且易于上手，是前端拖拽解决方案的理想选择。已在GitHub开源，适用于Vue 2.0。
摘要由CSDN通过智能技术生成

6005b6d579ac542bc1d1cbb0ceb3c31f.png

截止发稿2020年8月10日，这可能是目前最好的拖拽排序解决方案了。

介绍

VueDraggable 是一个专门解决拖拽排序和拖拽分组的前端开源代码库。

在 jQuery 的时代，有很多动效非常流畅丝滑的拖拽排序插件，但在国内 Vue.js 起来后，却比较难找到一款像 Sortable.js 那样的组件，而 Vue.Draggable 就是一款基于 Sortable.js 开发的 Vue 增强组件。

5406973f2f52b72be3a85974fc7008dc.png

e0c5ab150f581c21c40ec901b47ffd35.gif

特点

  • 支持触摸设备，支持智能滚动；
  • 支持拖拽和选择文本以及不同列表之间的拖拽；
  • 拖拽和视图模型同步刷新，兼容Vue 2.0 的过渡动画；
最低0.47元/天 解锁文章
kitenancy
关注
实现 el-table 拖拽行排序，并获取当前拖拽行的数据传入服务器
weixin_33905756的博客
12-19 4569
背景 由于在项目中碰到需要实现 行 拖拽排序，使用的是element ui库，查阅资料后发现，现在的element ui库中的el-table还不支持行拖拽排序。于是查阅的很多资料，发现是可以使用 sortablejs 实现拖拽的，但是它的拖拽是基于dom的，没有数据改变，而且项目中需要获取当前拖拽行的数据传给后台。。这就有点伤脑筋了，sortablejs 的 drag事件不能获取当前拖拽行的数据...
vue.draggable.next:基于Sortable.js的Vue 3兼容拖放组件
04-01
vue.draggable.next Vue组件（Vue.js 3.0）允许拖放并与视图模型数组同步。 对于Vue 2和Vue 1版本，请检查： : 基于并提供所有功能 演示版 现场演示 特征 全面支持功能： 支持触摸设备 支持拖动手柄和可选文本 ...
vue3+ts使用sortablejs实现弹窗表格拖拽显示table表头列表
weixin_59556897的博客
06-12 1660
在el-table 绑定一个class类样式。之后再使用sortablejs来写一个拖拽函数。点击表格的编辑，弹出弹窗，可以拖拽表头并且实现选中显示反显在表格表头。由于是纯前端实现，所以将数据存储在了本地数据里面。在页面引入sortablejs。
vue3: vuedraggable 的使用方法（正常数据的基本使用与树结构数据递归使用）
最新发布
qq_45796592的博客
08-04 561
vue3: vuedraggable 的使用方法（正常数据的基本使用与树结构数据递归使用）；源码复制即可使用
vue3拖拽排序使用Sortable，获取拖拽排序之后的数据
q12as的博客
08-16 3793
通过绑定onEnd回调方法，获取返回的evt对象，对象中存在oldIndex及newIndex参数，虽然拖拽之后获取的数据是没有改变的，vue3拖拽使用Sortable，获取拖拽之后的数据，Sortable拖拽结束之后获取的数据是没有改变的。1.安装Sortable。
sorttable获取拖动后数据
DDDEBOKE
10-20 196
http://t.csdnimg.cn/UFmXi
sortable 拖拽排序，获取排序后的数据
samll_redhat的博客
01-05 6646
问题： 使用sortable排序时，页面元素虽然重新排序了，但是真实的数组数据并没有排序，还是原来的顺序，但是如果排序时同时修改数组，会造成排序的昏乱 解决： 主要思路： 将数组的里的每条数据的id 赋给table元素的class上，这样获取排序后的元素，就能拿到由数组id组成的新数组，并且还是页面上排序后的顺序，然后再根据id的排序将原数组排序，得到排序后的新数组 1、 sortable 排序之后可以获取到最新的排序的元素 evt.to.rows 2、table一定要加上 row-key !
vue使用sortable实现拖拽排序
douyiqing的博客
09-23 8641
vue项目中使用sortable实现对块元素拖拽进行排序 下载： npm install sortablejs --save 引入： import Sortable from ‘sortablejs’ 使用： <template> <div class="flex" id="items"> <div class="item" v-for="(item,in...
基于Sortable.js的Vue拖拽组件_JavaScript_Vue_下载.zip
04-21
Vue.Draggable是一款基于Sortable.js库的Vue.js插件，用于实现高效的拖放排序功能。在前端开发中，拖放功能是一种常见的交互设计，能够提升用户体验，尤其在管理列表、卡片或其他可排序元素时。Vue.Draggable允许...
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
10-16
Vue-draggable是基于Sortable.js的一个Vue组件，Sortable.js是处理列表和可拖拽排序的JavaScript库。Vue-draggable继承了Sortable.js的特性，并且通过Vue的自定义指令的方式使其更易于在Vue项目中使用。 在实现拖拽...
jquery ui sortable拖拽后保存位置
10-19
主要为大家详细介绍了jquery ui sortable拖拽后保存位置的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue.draggable实现表格拖拽排序效果
10-17
在本文中，我们将深入探讨如何利用Vue.js框架中的vue.draggable组件来实现一个表格拖拽排序的效果。通过这个实现，我们能够提供一个交互性更强、用户体验更佳的界面。 首先，关于vue.draggable的实现原理，它依赖于...
sortable使用小知识（vue）-- 使用sortable拖拽插件在初始化循环标签的状态下，如何获取拖拽的数据
myisyourbb的博客
06-07 3558
废话 大家搜索这个基本都知道这个插件是干啥的，那我就不废话了。如果真的有人不晓得的话，点这个: sortable.js中文文档。 问题场景 当时产品拿着一个示例给我，我就要做成这样的。 emmm，我看了下。右边的信号源列表拖拽到左边的显示列表的子元素内。表示那个显示装置接收了哪个信号源。 了解后我向产品表达了自己的理解，你给我的这个拖拽过去后没有显示，用户都不知道拖拽成功没，而且也成功了也可能会出现不晓得拖到哪个去了的情况，要不要拖过去后就显示在显示列表的子元素下面（即投影仪下面） 就像这样 唉，产品却
sortable获取拖拽后的数据_亚马逊海卖助手关停后，卖家如何获取即时销售数据？...
weixin_30851655的博客
01-15 272
亚马逊海卖助手这次真的停了！现在打开官网，已经摇身变成了卖家中心页面了。正式关停后，各大论坛上的卖家一片“哀嚎” ——「烦，海卖助手又双叒叕不能用了？卖家还能怎么办？」「海卖助手如果再不能用了，对于经常几分钟刷一次销量的我们来说，感觉每天做亚马逊的乐趣和热情感觉会少了很多」不过，也有 2g 冲浪的卖家表示「海卖助手我还没用过呢，怎么就不能用了」其实，亚马逊从 2018 年开始就说要停用亚马逊海卖助...
sortablejs拖拽排序
dream_boy_的博客
05-10 275
【代码】sortablejs拖拽排序。
Sortable.js拖动移动行位置，数据随之调整
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-22 937
【代码】JS拖动移动行位置，数据随拖动调整。
利用回调函数获取拖拽后的顺序
忘忧忧忧忧忧忧忧
04-15 436
1、利用gridly进行拖拽的效果实现 <ul class="ptlt-app-lst ui-sortable cog gridly" id="dragable"> <% for (int i = 0; i < AppCardEntityList.size(); i++) { %> <li class="cog-card ui-sort...
el-table 使用sortable排序后如何获取排序后数据
weixin_54820790的博客
02-21 849
直接可以获取排序后的数据。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值