位置: 编程技术 - 正文

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)

  • 纳税人资格是什么意思
  • 增值税进项税没那么多,申报表多填
  • 营业额和营业收入区别举例
  • 没有进项发票出口转内销
  • 企业出售不动产的涉税问题
  • 发票只能全部冲开吗
  • 当月勾选认证的原材料与当月领用的原材料区别
  • 银行汇票怎么填写
  • 收据注明实际到账时间
  • 购买货物待销售会计分录
  • 境外工资薪金
  • 企业车辆办理违章
  • 物业公司代收水费合理吗
  • 平销行为如何冲减进项税金
  • 个税系统工资少报了怎么办
  • 公司自己的食堂需要办理食品经营许可证吗
  • 厂家质量问题商家有责任吗
  • 进项税转出补交的增值税和附加税可以税前扣除吗
  • 差旅费的会计处理
  • 固态硬盘如何接入电脑
  • win11资源管理器卡死
  • 如何清除苹果手机6s垃圾
  • PHP:session_decode()的用法_Session函数
  • 广度优先算法代码
  • win7怎么删除windows.old
  • kernl32.dll
  • 程序员中秋节祝福语
  • php的数据类型主要有哪几种
  • 不得税前扣除的项目有哪些
  • 建筑业2021年享受核定征收吗
  • 财税〔2017〕34号文件中提到的科技型中小企业是指哪种企业?
  • php new
  • 如何自定义smartart
  • 社保基数跟个税差1仟多有风险吗
  • 固定资产提前报废
  • 一般纳税人企业所得税多久申报一次
  • uni-app是干嘛的
  • autoreconf -ivf
  • 报名附件怎么上传
  • 民办非企业培训机构注册流程
  • 税务三方协议怎么重签
  • 小规模年销售额500万界定标准
  • 社保费和公积金一定要计提吗
  • 国税里货币资金怎么算
  • 增值税发票丢失怎么补开
  • sql service 2008 数据库还原
  • 总记账凭证核算怎么做
  • 视同销售是指什么?
  • 分销佣金账务处理流程
  • 无形资产专利技术属于
  • 工会的会费收入是什么
  • 税控盘忘记抄报税怎么办
  • 收到合同后的整个流程
  • 以旧换新会计科目
  • 免税货物如何开具发票
  • 开票系统的维护与保养
  • 债务转实收资本的审批报告
  • mysql错误代码1418
  • ubuntu怎么装
  • win7系统中怎么卸载安装的软件
  • win7更改电脑设置在哪里
  • win8.1评估版
  • 开启linux系统路由转发功能的语句
  • macbookpro通知栏
  • 三步搞定的贵公子发型教程
  • Linux Bash Shell入门教程
  • win7打印机删除后怎么恢复
  • unity best fit
  • javascript数据结构与算法
  • jquery的show和hide
  • 如何在手机上直接买彩票
  • nodejs爬虫 与python爬虫
  • android GridView实现图库预览图,多选模式下右上角打勾
  • android需要学什么
  • javascript面向对象精要
  • 四川国家税务局官网
  • 内蒙古网上税务登记流程
  • 卷票是什么票
  • 国企人事处长是什么级别?
  • 贵州地税电话
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设