位置: 编程技术 - 正文

jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案(jquery排序上升和排序下降)

编辑:rootadmin

推荐整理分享jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案(jquery排序上升和排序下降),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jquery拖拽流程布局,jquery 拖拽排序,jquery拖动div,jquery排他,jquery拖动div,jquery排序函数,jquery拖拽流程布局,jquery 拖动排序,内容如对您有帮助,希望把文章链接给更多的朋友!

前些日子不是在做使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug。今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题。

首先先上图描述一下问题:

先来张正常的图:

如上图,整个div层被我设置了固定高度和滚动条。页面如上所示,在可排序区域(黄色列表区域)可见情况下,从左面向右边拖拽时,可以成功触发排序的操作。

接着再来张bug图

上图为bug触发说明图,将滚动条拖拽到底部(保证右侧可排序的黄色区域在div中不可见就行),此时是看不见黄色的排序列表的。在这个情况下,拖拽需要排序的元素,然后鼠标一直拖拽向上移动到可排序的列表区域时,会发现排序操作没有任何作用。无法触发排序功能。

几经查找,终于发现了一个方法。来看一下:

jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案(jquery排序上升和排序下降)

猜测是,鼠标在红色边框区域内拖拽移动到排序位置时,没有计算涉及到滚动条的距离等信息。看到了上面的方法说明,本人就尝试了一下,定义了div的滚动事件机制,在滚动事件触发时,加载refresh方法来刷新位置信息。方法定义好后,再次重复试验上面的两种情况,okay,都可以搞定了。

下面给出demo的代码,大家在遇到这种情况下就可以将整个小bug灭掉了。

以上,就是记录jqueryui使用过程中遇到的一个问题。遇到同样问题的小伙伴可以试一试~~

结尾还遗留了一个类似问题,但不能使用上面的方式解决,如果有遇到下面这种情况的小伙伴,求告知。再此也描述一下问题:

其实,在实际的使用过程中,关于在有滚动条时使用jqueryui的交互事件,依然会有一些问题。也尝试看一下jqueryui的源码,对比一下,发现确实在draggable中设置connectToSortable时,它的拖拽排序方法记录位置信息时并不准确,应该说缓存的位置信息不能及时更新,一次计算错误后,导致后续的位置越来越偏移。如下图:

可以看到中间部分,我拖拽了一个元素,此时我的鼠标在在中间的黄色区域,但是拖拽元素(淡蓝色方框)却距离鼠标位置很远。这个情况的发生情况是这样的,在左侧拖拽元素后,一直在中间面板拖动,中间面板有很多个小容器,它们都可以盛放拖拽的元素。鼠标在这些容器上来回移动几次后就会出现鼠标位置和元素位置偏移问题。

这个问题不是前面提及的在滚动条事件中加上refresh方法就可以解决了。目前这个问题看jqueryui源码应该是临时记录的位置信息问题,也没有计算滚动条距离等。想尝试一下改动jqueryui源码,改了半天,未见成效啊。

遗留下了这个问题。如果有知道该问题的解决方案的小伙伴, 求告知解决方案啊~~~

Jquery Easyui对话框组件Dialog使用详解() Dialog对话框组件依赖于Window(窗口)组件、linkbutton组件加载方式Class加载divclass="easyui-dialog"title="弹出框"data-options="iconCls:'icon-add',resizable:true,modal:true"style="w

如何解决jQuery EasyUI 已打开Tab重新加载问题 先给大家说下我的需求,如下:点击左侧已经打开的tab可以刷新重新加载datagrid。也就是说解决easyui左侧tab重新刷新加载问题实现。实现如下:functionaddT

详解Jquery的事件操作和文档操作 对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们

标签: jquery排序上升和排序下降

本文链接地址:https://www.jiuchutong.com/biancheng/373948.html 转载请保留说明!

上一篇:jQuery Easyui datagrid editor为combobox时指定数据源实例

下一篇:Jquery Easyui对话框组件Dialog使用详解(14)(jqueryui easyui)

  • 固定资产清理过程涉及的报表
  • 小型微利企业的从业人数和资产总额
  • 资源税的计税方法自产
  • 房地产企业拆迁补偿费契税12366
  • 购买的固定资产什么时候折旧
  • 纳税人在什么情况下可以延期申报
  • 个人减税具体政策
  • 金融服务利息
  • 搬迁到新租赁厂房的费用入什么科目?
  • 简易计税在借方还是贷方
  • 水利印花税计算公式
  • 业务招待费进项税额需要转出吗
  • 交际应酬费用
  • 红字发票信息单需要寄给对方吗
  • 暂估在建工程会计科目
  • 公允价值变动损益在利润表哪里
  • windows11开始菜单点击没反应
  • 银行余额调节表的作用
  • 应收账款和预收账款的关系
  • 哪些进项税可以加计抵减
  • 人力资源服务收入计入什么科目
  • php哪个函数能取得字符串长度
  • 简单才能极致
  • 汽车修理公司的成本怎么核算
  • php二维数组foreach
  • 零售金银首饰的商场要交消费税吗
  • php的框架有哪些
  • 企业所得税营业外收入
  • yii框架连接数据库
  • 损益类科目调整影响所得税吗为什么
  • Vite4 + Vue3 + vue-router4 动态路由
  • 手把手教你用Excel制作考勤表
  • es6从入门到实战
  • Programming tutorials and source code examples
  • 营改增分录
  • 低值易耗品还需要录入明细吗
  • 固定资产净残值和净值的区别
  • 普通发票可以扣除吗
  • 先付款后收到发票
  • 事业单位之间调动难吗
  • 小规模纳税人的增值税计入成本吗
  • 金税盘的维护费怎么报税
  • 申请专利的费用怎么入账
  • 虚购发票进项税怎么处理
  • 员工话费实报实销分录
  • 2020年专项扣除怎么填
  • 金蝶制造费用明细如何查询
  • 班车租赁发票税率是多少
  • 住宿费报账怎么写
  • 年末未分配利润总额计算公式
  • mysql的性能调优
  • mysql数据库主机一般填什么
  • ubuntu20设置wifi
  • centos直接安装
  • 在unix操作系统中,账户的功能有哪些
  • ubuntu18.04启用root
  • win7j
  • win8怎么关闭管理员用户
  • vim删除^m
  • linux系统稳定
  • 高德地图自动跳出来
  • Windows设置在哪里
  • linux rpm -i
  • django 验证码
  • perl 排序
  • js运行时错误
  • android开发范例实战宝典
  • 安卓手机wifi界面
  • js获取tbody
  • angularjs简介
  • unity3d跨平台
  • JavaScript中String.match()方法的使用详解
  • javascript入门基础
  • 相机调取失败
  • javascript的弹窗
  • python的设置
  • 贵阳网上办税服务厅
  • 浅谈新时代劳动教育答案
  • 新办纳税人是什么多久之内
  • 国家税务总局河北地税局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设