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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
js的toUpperCase方法用法实例
Jan 27 Javascript
jQuery实现DIV层收缩展开的方法
Feb 27 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
强大的 Angular 表单验证功能详细介绍
May 23 Javascript
AngularJS使用ocLazyLoad实现js延迟加载
Jul 05 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
微信小程序实现bindtap等事件传参
Apr 08 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之第九天
2006/10/09 PHP
phpmyadmin安装时提示:Warning: require_once(./libraries/common.inc.php)错误解决办法
2011/08/18 PHP
PHP return语句另类用法不止是在函数中
2014/09/17 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
High Performance JavaScript(高性能JavaScript)读书笔记分析
2011/05/05 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
Javascript快速排序算法详解
2014/12/03 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
javasript实现密码的隐藏与显示
2015/05/08 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
JS hashMap实例详解
2016/05/26 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
在vue中高德地图引入和轨迹的绘制的实现
2019/10/11 Javascript
webpack3.0升级4.0的方法步骤
2020/04/02 Javascript
详解React 元素渲染
2020/07/07 Javascript
Python验证企业工商注册码
2015/10/25 Python
Python读取系统文件夹内所有文件并统计数量的方法
2018/10/23 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
使用Pandas的Series方法绘制图像教程
2019/12/04 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
利用python+request通过接口实现人员通行记录上传功能
2021/01/13 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
canvas裁剪clip()函数的具体使用
2018/03/01 HTML / CSS
Prototype如何更新局部页面
2013/03/03 面试题
给老婆的搞笑检讨书
2014/01/12 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
幼儿园毕业典礼家长致辞
2015/07/29 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
如何使用pdb进行Python调试
2021/06/30 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL