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 相关文章推荐
一个刚完成的layout(拖动流畅,不受iframe影响)
Aug 17 Javascript
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
Bootstrap布局组件应用实例讲解
Feb 17 Javascript
AngularJS入门教程之过滤器详解
Aug 19 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
JavaScript制作简单的框选图表
May 15 Javascript
JS实现给json数组动态赋值的方法示例
Mar 19 Javascript
node.js环境搭建图文详解
Sep 19 Javascript
详解Express笔记之动态渲染HTML(新手入坑)
Dec 13 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中的常用函数回顾
2013/07/11 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
Yii框架防止sql注入,xss攻击与csrf攻击的方法
2016/10/18 PHP
js获取图片长和宽度的代码
2009/11/24 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
使用ajax的post同步执行(实现方法)
2017/12/21 Javascript
vue-cli脚手架的安装教程图解
2018/09/02 Javascript
ES6 更易于继承的类语法的使用
2019/02/11 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
python实现弹跳小球
2019/05/13 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python rsa实现数据加密和解密、签名加密和验签功能
2019/09/18 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
Python的两道面试题
2013/06/29 面试题
股权转让协议书
2014/04/12 职场文书
致共产党员倡议书
2014/04/16 职场文书
给市场的环保建议书
2014/05/14 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
学生会干部自我鉴定2014
2014/09/18 职场文书
贷款收入证明格式
2015/06/24 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python