sortable.js 页面排序混乱问题解决

已于 2024-12-23 13:29:12 修改
阅读量377 收藏
点赞数 2
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 vue vue.js
于 2024-12-23 13:28:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/peachsake/article/details/144663872

sortable.js 页面排序混乱问题解决

最近用sortable.js写了一个可拖拽的功能，但onend回调里将数据改变之后，页面会根据最新的数据重新进行渲染，就会出现拖拽之后页面不改变或者排序混乱，解决办法如下。

再表格中写上一个row-key值，这个值要固定唯一，拖拽排序后也不会发生变化。
在这里插入图片描述

peachsake
关注
【JS】使用sortable实现拖拽功能
夜_清澄的博客
07-05 2977
emmmmm 感觉自己是个被java耽误了的前端闲话少说 进入正题工作中有的时候需要实现一个拖拽功能 比如你有一个列表 然后忽然客户说 改需求了 这个列表顺序要变 你也不能说整个删了重新写一个列表吧 这多绝望啊 就有了几个解决方案：1.弄个图标上移下移function move(obj,fx) { var parent = $(obj).parents(".ui-state-default");...
sortable.js
04-17
拖拽排序
el-table中sortable排序不准确
04-20 1334
极有可能是排序的字段类型不是数字，而是字符串！将它转为整形或者浮点型就好了，或者在sql语句中转，见：https://blog.csdn.net/qq_40323256/article/details/124292446?spm=1001.2014.3001.5501
Vue使用Sortablejs拖拽排序 视图显示与数据不一致、拖拽结束后回跳问题
最新发布
qq505751223的博客
04-29 408
注意：拖拽一定不能用index作为key，也不建议用item，否则会回跳，建议用唯一值ID；
sortablejs + vue2 + ElementUi 实现拖拽排序
岁月流熵，用理智/秩序构建堡垒留存我们的光芒
10-09 1018
是一个JavaScript库，用于创建具有拖放排序功能的交互式列表和表格。它允许您通过拖放方式重新排列HTML元素，例如列表或表格行，以自定义其顺序。SortableJS支持多种拖放手势和交互，包括触摸屏操作和鼠标拖放。除此之外，SortableJS还提供了许多选项和事件供您自定义和扩展其功能。它的主要作用是使网页更加交互和用户友好。
sort排序bug乱序
tan47325的博客
10-25 1563
项目需要对组件的zIndex值进行降序排列，刚开始采用的是sort进行排序，排完之后感觉没问题，毕竟也是经常用的，可是昨天无意中把zIndex值打出来看，一看不知道，发现只要排序的组件超过10个就出问题，刚开始以为zIndex是字符串的缘故，可在转换之后还是乱序的，下面是代码以及排序结果：                    可以看到当增加到第11个时，zIndex为5的跑到了最前面...
jquery的sortable拖拽排序问题，在页面上多次拖拽保存顺序之后，刷新页面，排序出现紊乱
铁柱的博客
02-20 9588
一、前言       这篇博客是因为我在做完拖拽保存之后，测试多次拖拽，然后刷新页面，发现保存的顺序出来紊乱。这就很无奈了啊，打印各项数据才发现，因为保存用的是ajax的方式，所以页面上的列表序号是固定的，比如列表序号是： 1-2-3-4-5 那么把1和5互换位置之后为： 5-2-3-4-1 也就是说，每个列表的序号是固定的 我...
Element UI 表格行列拖拽排序：Sortable.js 实现教程
"在JavaScript开发中，实现Element UI 表格的行列拖拽功能通常需要借助第三方库Sortable.js，因为它并未内置此功能。本文档提供了如何在Element UI 表格中集成Sortable.js以实现实时的行列拖拽排序的步骤和示例代码...
使用sortable跨行拖拽的时候中间单元自动上调导致排序混乱怎么解决
06-09
在使用 Sortable 进行跨行拖拽排序时，中间单元格自动上调可能会导致排序混乱。一种解决方法是使用 Sortable 的 `swapThreshold` 选项来控制拖拽时自动上调的距离，以及使用 `onEnd` 回调函数来手动调整排序。 具体...
使用sortable跨行拖拽对换位置中间的单元会自动上调导致排序混乱怎么解决
06-09
在使用sortable进行跨行拖拽对换位置时，可能会出现中间的单元格自动上调的问题，导致排序混乱。这个问题可以通过设置`helper: "clone"`选项来解决。具体来说，可以在初始化sortable时使用以下代码： ```javascript...
Sortable.js
08-05
主要实现对文件（图片 视频）等显示可拖动效果，应用于图片的视频的拖动排序
ui.sortable.js
04-18
jquery ui sortable 结合jquery ui.core使用
sortable排序
08-16
在使用sortable.js进行排序时，页面元素会重新排序，但实际的数组数据并没有进行排序，仍然保持原来的顺序。如果在排序过程中同时修改了数组，会导致排序结果混乱。为了在提交时得到排序后的新数组，可以按照id的...
解决 element + sortablejs 实现表格拖拽 顺序出现混乱问题
qq_40431271的博客
06-18 4711
最根本问题就是table表格的row-key问题 直接上代码 <template> <div> <el-table :data="tableData" style="width: 60%;margin: auto;margin-top: 100px" class="project-auth-emp-list-table" row-key="id" border> <el-table-column label="日期" width="180"
el-table表格——sortable排序 & 出现小数、%时排序错乱
weixin_44867717的博客
07-05 1850
排序
el-table表格的sortable排序的使用以及出现小数、%排序错乱
qq_45903009的博客
03-16 5677
前端实现排序： 只需要在表头上加上一个sortable属性即可 <el-table-column prop="unusualCount" label="异常数据总量" align="center" :show-overflow-tooltip="true" sortable /> 问题1、当数据中出现小数，导致排序错乱 解决1、 <el-ta
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值