jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
前些日子不是在做使用Jquery-UI实现一次拖拽多个选中的元素操作嘛，在持续完善这个组件时遇到了一个关于拖放排序的bug。今天就着图片和代码重现一下，也顺便告诉大家如何解决这个问题。
首先先上图描述一下问题：
先来张正常的图：
如上图，整个div层被我设置了固定高度和滚动条。页面如上所示，在可排序区域（黄色列表区域）可见情况下，从左面向右边拖拽时，可以成功触发排序的操作。
接着再来张bug图
上图为bug触发说明图，将滚动条拖拽到底部（保证右侧可排序的黄色区域在div中不可见就行），此时是看不见黄色的排序列表的。在这个情况下，拖拽需要排序的元素，然后鼠标一直拖拽向上移动到可排序的列表区域时，会发现排序操作没有任何作用。无法触发排序功能。
几经查找，终于发现了一个方法。来看一下：
猜测是，鼠标在红色边框区域内拖拽移动到排序位置时，没有计算涉及到滚动条的距离等信息。看到了上面的方法说明，本人就尝试了一下，定义了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时，它的拖拽排序方法记录位置信息时并不准确，应该说缓存的位置信息不能及时更新，一次计算错误后，导致后续的位置越来越偏移。如下图：
可以看到中间部分，我拖拽了一个元素，此时我的鼠标在在中间的黄色区域，但是拖拽元素（淡蓝色方框）却距离鼠标位置很远。这个情况的发生情况是这样的，在左侧拖拽元素后，一直在中间面板拖动，中间面板有很多个小容器，它们都可以盛放拖拽的元素。鼠标在这些容器上来回移动几次后就会出现鼠标位置和元素位置偏移问题。
这个问题不是前面提及的在滚动条事件中加上refresh方法就可以解决了。目前这个问题看jqueryui源码应该是临时记录的位置信息问题，也没有计算滚动条距离等。想尝试一下改动jqueryui源码，改了半天，未见成效啊。
遗留下了这个问题。如果有知道该问题的解决方案的小伙伴， 求告知解决方案啊~~~
相关推荐
-
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
在本文中,我们将向您展示如何创建一个启用用户拖动和放置用户想买的商品的购物车页面,购物篮中的物品和价格将更新,分享给大家,具体内容如下: 效果图: 具体代码如下 显示页面上的商品: <ul class="products"> <li> <a href="#" class="item"> <img src="images/shirt1.gif"/> <div> <
-
jQueryUI写一个调整分类的拖放效果实现代码
所以还是自己动手丰衣足食,还是坚持简单就是美的代码风格. 试试在iframe里嵌入一个测试页面,你可以使用鼠标拖动项目,调整分类: 当然,这并不是我要的最终效果,只能说它已经实现了一个我想要的拖放效果.我要求的在这个基础上,还要增加自动排序,位置变更后恢复之前元素bind的jQuery事件等. 代码 代码如下,如要复制,请先查看纯文本版本! 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>Drag &
-
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
前些日子不是在做使用Jquery-UI实现一次拖拽多个选中的元素操作嘛,在持续完善这个组件时遇到了一个关于拖放排序的bug.今天就着图片和代码重现一下,也顺便告诉大家如何解决这个问题. 首先先上图描述一下问题: 先来张正常的图: 如上图,整个div层被我设置了固定高度和滚动条.页面如上所示,在可排序区域(黄色列表区域)可见情况下,从左面向右边拖拽时,可以成功触发排序的操作. 接着再来张bug图 上图为bug触发说明图,将滚动条拖拽到底部(保证右侧可排序的黄色区域在div中不可见就行),此时是看不
-
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
原因: -webkit-overflow-scrolling:touch 解释: 由于使用-webkit-overflow-scrolling这个属性,苹果手机会使用硬件加速,从而促使页面滑动得更加流畅,然而也导致了页面出现空白的情况. 解决办法: 滚动之前,先设-webit-overflow-scrolling的属性值为auto,然后页面滚动完了,再设为touch即可. 实例: $("#id").css('-webkit-overflow-scrolling','auto'); $(
-
PHP 中执行排序与 MySQL 中排序
此文首发在 InfoQ 中文站.作者:明灵(dragon) , Fenng . Note:要转载的朋友请注意注明这篇文章的第一作者!这篇文章是dragon 朋友来邮探讨后他做的一个总结.在 DB 中排序还是在 应用程序中排序是个很有趣的话题,dragon 第一份邮件中其实已经总结的很好了,我添加了一点建议而已.现在放上来,与大家共享.这篇文章也投稿到了 InfoQ 中文站 . Q:列出在 PHP 中执行排序要优于在 MYSQL 中排序的原因?给一些必须在MYSQL中排序的实例? A:通常来说,执
-
C语言基本排序算法之插入排序与直接选择排序实现方法
本文实例讲述了C语言基本排序算法之插入排序与直接选择排序实现方法.分享给大家供大家参考,具体如下: 声明待排序元素类型 /*-------------------------- typedef.h 方便修改待排序元素类型 -------------------------------------*/ #ifndef TYPEDEF_H #define TYPEDEF_H typedef int T; #endif 插入排序: /*---------------------------------
-
java 合并排序算法、冒泡排序算法、选择排序算法、插入排序算法、快速排序算法的描述
算法是在有限步骤内求解某一问题所使用的一组定义明确的规则.通俗点说,就是计算机解题的过程.在这个过程中,无论是形成解题思路还是编写程序,都是在实施某种算法.前者是推理实现的算法,后者是操作实现的算法. 一个算法应该具有以下五个重要的特征: 1.有穷性: 一个算法必须保证执行有限步之后结束: 2.确切性: 算法的每一步骤必须有确切的定义: 3.输入:一个算法有0个或多个输入,以刻画运算对象的初始情况: 4.输出:一个算法有一个或多个输出,以反映对输入数据加工后的结果.没有输出的算法是毫无意义的:
-
10个python3常用排序算法详细说明与实例（快速排序，冒泡排序，桶排序，基数排序，堆排序，希尔排序，归并排序，计数排序）
我简单的绘制了一下排序算法的分类,蓝色字体的排序算法是我们用python3实现的,也是比较常用的排序算法. Python3常用排序算法 1.Python3冒泡排序--交换类排序 冒泡排序(Bubble Sort)也是一种简单直观的排序算法. 它重复地走访过要排序的数列,一次比较两个元素,如果他们的顺序错误就把他们交换过来. 走访数列的工作是重复地进行直到没有再需要交换,也就是说该数列已经排序完成.这个算法的名字由来是因为越小的元素会经由交换慢慢"浮"到数列的顶端. 作为最简单的排序算法
-
C语言常见排序算法之插入排序(直接插入排序,希尔排序)
目录 前言 一.直接插入排序 1.1 基本思想 1.2 算法思想 1.3 程序实现 1.4 直接插入排序的总结 二.希尔排序 2.1 算法思想 2.2 程序实现 2.3 希尔排序的特征总结 前言 本期为大家带来的是常见排序算法中的插入排序,主要有直接插入排序以及它的升级版——希尔排序,包您一看就会,快来试试吧~ 一.直接插入排序 1.1 基本思想 在生活当中,这种排序方式处处可见: 在玩扑克牌的时候我们就会采用插入排序的思想,当我们拿起第二张牌时,就会下意识的与第一张牌进行比较,如果比第一张牌小
-
Map按单个或多个Value排序当Value相同时按Key排序
Map可以先按照value进行排序,然后按照key进行排序. 或者先按照key进行排序,然后按照value进行排序,这都是可以的. 并且,大家可以制定自己的排序规则.按单个value排序: import java.util.Collections; import java.util.HashMap; import java.util.LinkedHashMap; import java.util.Map; import static java.util.Map.Entry.comparingBy
-
C++实现八个常用的排序算法 插入排序、冒泡排序、选择排序、希尔排序等
本文实现了八个常用的排序算法:插入排序.冒泡排序.选择排序.希尔排序 .快速排序.归并排序.堆排序和LST基数排序 首先是算法实现文件Sort.h,代码如下: /* * 实现了八个常用的排序算法:插入排序.冒泡排序.选择排序.希尔排序 * 以及快速排序.归并排序.堆排序和LST基数排序 * @author gkh178 */ #include <iostream> template<class T> void swap_value(T &a, T &b) { T t
-
解决vue中的无限循环问题
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制台的话运行是没问题的.但是控制台报了无限循环的错误. 下面是错误代码 html: js: 这里会出现无限循环的原因是数据更新触发计算方法来更新视图,视图更新又反过来触发这个方法更新数据.所以尽量不要直接在绑定的数据上使用方法来绑定.找到问题后下面就是解决办法. 因为选中商品后就要重新计算价格.所以我