jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案


Posted in Javascript onDecember 19, 2016

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

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

先来张正常的图:

jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案

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

接着再来张bug图

jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案

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

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

jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案

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

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

<!doctype html>
<html lang="en">
<head>  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable - Connect lists</title>
  <link rel="stylesheet" href="js/jquery-ui-1.12.1.dropable/jquery-ui.css" />
  <style>
    #sortable1, #sortable2 {
      border: 1px solid #eee;
      width: 142px;
      min-height: 20px;
      list-style-type: none;
      margin: 0;
      padding: 5px 0 0 0;
      float: left;
      margin-right: 10px;
    }
    #sortable1 li, #sortable2 li {
      margin: 0 5px 5px 5px;
      padding: 5px;
      font-size: 1.2em;
      width: 120px;
    }
  </style>
  <script src="js/jquery-1.11.2.js"></script>
  <script src="js/jquery-ui-1.12.1.dropable/jquery-ui.js"></script>
  <script>
    $( function() {
      $("#sortable1>li").draggable({
        containment: "#cc",
        cursor: "default",
        cancel: "span,input",
        distance: 10,
        zIndex: 9,
        opacity: 0.5,
        cursorAt: {
          right: 20,
          top: 20
        },
        connectToSortable: "#sortable2"
      });
      $("#cc>div").scroll(function(e) {
        $( "#sortable2").sortable( "refresh" ); //触发滚动时刷新位置信息
        //$( "#sortable2").sortable( "refreshPositions" ); //同上,使用其中一个即可
      });
      $( "#sortable2" ).sortable({
        containment:"#cc",
        connectWith:"#sortable1",
        zIndex:9
      });
    } );
  </script>
</head>
<body>
<div id="cc" style="width:500px;height:200px;border:1px solid red;margin-left:50px;margin-top:80px">
  <div style="width:100%;height:100%;overflow-y:auto;position:relative">
    <ul id="sortable1" class="connectedSortable">
      <li class="ui-state-default">Item 1</li>
      <li class="ui-state-default">Item 2</li>
      <li class="ui-state-default">Item 3</li>
      <li class="ui-state-default">Item 4</li>
      <li class="ui-state-default">Item 5</li>
      <li class="ui-state-default">Item 6</li>
      <li class="ui-state-default">Item 7</li>
      <li class="ui-state-default">Item 8</li>
      <li class="ui-state-default">Item 9</li>
      <li class="ui-state-default">Item 0</li>
    </ul>
    <ul id="sortable2" class="connectedSortable">
      <li class="ui-state-highlight">Item 1</li>
      <li class="ui-state-highlight">Item 2</li>
      <li class="ui-state-highlight">Item 3</li>
    </ul>
  </div>
</div>
</body>
</html>

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

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

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

jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案

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

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

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

Javascript 相关文章推荐
Ajax::prototype 源码解读
Jan 22 Javascript
JavaScript实现自己的DOM选择器原理及代码
Mar 04 Javascript
Jquery选中或取消radio示例
Sep 29 Javascript
JS跨域问题详解
Nov 25 Javascript
jQuery网页版打砖块小游戏源码分享
Aug 20 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
jquery实现图片切换代码
Oct 13 Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
Dec 19 #Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
Dec 19 #Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
Dec 19 #Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 #Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 #Javascript
Bootstrap的基本应用要点浅析
Dec 19 #Javascript
详解javascript获取url信息的常见方法
Dec 19 #Javascript
You might like
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
ThinkPHP独立分组使用的注意事项
2014/11/25 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
2015/03/04 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
jQuery实用密码强度检测
2017/03/02 Javascript
vue滚动轴插件better-scroll使用详解
2017/10/17 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
Python中的闭包实例详解
2014/08/29 Python
Python中List.index()方法的使用教程
2015/05/20 Python
Fabric 应用案例
2016/08/28 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
Flask配置Cors跨域的实现
2019/07/12 Python
pycharm无法导入本地模块的解决方式
2020/02/12 Python
python实现井字棋小游戏
2020/03/04 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
值传递还是引用传递
2015/02/08 面试题
幼儿生日活动方案
2014/08/27 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书