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 相关文章推荐
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 Javascript
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JS常用表单验证方法总结
May 22 Javascript
解决JS外部文件中文注释出现乱码问题
Jul 09 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
Vee-Validate的使用方法详解
Sep 22 Javascript
JavaScript面向对象程序设计创建对象的方法分析
Aug 13 Javascript
Vuejs2 + Webpack框架里,模拟下载的实例讲解
Sep 05 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
微信js-sdk 录音功能的示例代码
Nov 01 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,ajax实现分页
2008/03/27 PHP
探讨:array2xml和xml2array以及xml与array的互相转化
2013/06/24 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
Yii使用DeleteAll连表删除出现报错问题的解决方法
2016/07/14 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
Google韩国首页图标动画效果
2007/08/26 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
js的for in循环和java里foreach循环的区别分析
2015/01/28 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
常用jQuery选择器汇总
2017/02/02 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python学习笔记之解析json的方法分析
2017/04/21 Python
利用 Flask 动态展示 Pyecharts 图表数据方法小结
2019/09/04 Python
python中必要的名词解释
2019/11/20 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
pytorch中index_select()的用法详解
2021/01/06 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
River Island美国官网:英国高街时尚品牌
2018/09/04 全球购物
自考生自我评价分享
2014/01/18 职场文书
优秀党支部书记事迹材料
2014/05/29 职场文书
乐山大佛导游词
2015/02/02 职场文书
职称评定个人总结
2015/03/05 职场文书
民事上诉状范文
2015/05/22 职场文书
如何在centos上使用yum安装rabbitmq-server
2021/03/31 Servers
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
详细总结Python常见的安全问题
2021/05/21 Python