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 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
IE JS编程需注意的内存释放问题
Jun 23 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
Aug 18 Javascript
Javascript writable特性介绍
Feb 27 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
Aug 16 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
Sep 11 Javascript
Vue实现多标签选择器
Nov 28 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通用分页类page.php[仿google分页]
2008/08/31 PHP
php 连接mssql数据库 初学php笔记
2010/03/01 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
解决php-fpm.service not found问题的办法
2017/06/06 PHP
jsonp原理及使用
2013/10/28 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
《JavaScript DOM 编程艺术》读书笔记之DOM基础
2015/01/09 Javascript
JavaScript判断数组是否包含指定元素的方法
2015/07/01 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
初学node.js中实现删除用户路由
2019/05/27 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
JavaScript实现网页跨年倒计时
2020/12/02 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
django初始化数据库的实例
2018/05/27 Python
解决python通过cx_Oracle模块连接Oracle乱码的问题
2018/10/18 Python
解析Python的缩进规则的使用
2019/01/16 Python
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
社区八一活动方案
2014/02/03 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
十八大观后感
2015/06/12 职场文书
教育教学工作反思
2016/02/24 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
Android Studio实现带三角函数对数运算功能的高级计算器
2022/05/20 Java/Android