处理重叠的jQuery可排序列表 [英] Dealing with overlapping jQuery sortable lists
问题描述
这是一个晦涩的问题，但是我正在使用jQuery Sortables，并尝试将两个连接的列表一起工作得很好，当一个被定位为固定时。它一切正常，直到您滚动页面一点，使两个列表最终定位在彼此之上。然后，这些列表似乎让人困惑，哪个人应该收到被拖动的项目，这意味着您会在每个列表中出现/消失时发生一连串抖动。
This is a bit of an obscure issue, but I'm using jQuery Sortables and trying to get two connected lists working together nicely when one is positioned as fixed. It all works fine until you scroll the page a bit such that the two lists end up positioned on top of each other. Then the lists seem to get confused as to which one should be receiving the item that's being dragged, meaning you get a bunch of jittering happening as it appears/disappears in each list.
看起来问题是两个列表都处理鼠标/排序事件，因为拖动的项目在技术上是两个列表，但我想要的是覆盖列表（即位置：固定的一个）吞下事件，使底层主列表不尝试接收该项。
It looks like the issue is that both lists are handling the mouse/sort events since the item being dragged is technically over both lists, but what I want is to have the overlayed list (i.e. the position: fixed one) swallow the events so that the underlying main list doesn't try to receive the item.
这是最小的代码示例： / p>
Here's the minimal code example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<style type="text/css">
ul { list-style-type: none; padding: 0; float: left; }
li { margin: 5px; padding: 5px; width: 500px; border: solid 1px #F00; background-color: #FFF; }
#overlayed { position: fixed; top: 0; background-color: #000; margin: 20px; padding: 10px; }
#overlayed li { width: 50px; float: left; }
</style>
<script type="text/javascript">
$(function() {
$("ul").sortable({ connectWith: "ul", opacity: 0.6 }).disableSelection();
});
</script>
</head>
<body>
<div id="overlayed">
<ul>
<li>Item X</li>
<li>Item Y</li>
<li>Item Z</li>
</ul>
</div>
<br/><br/><br/><br/><br/>
<ul>
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
</ul>
</body>
</html>
所以问题是，我该如何解决？
So the question is, how do I fix it?
推荐答案
我最终通过扩展内置可排序功能来修复此问题，以创建一个 fixedSortable 可以检测并有选择地忽略当有重叠的地方悬停在列表上。为了我的目的，我只是硬编码的规则，因为这适合我的需要/时间限制，但你应该能够使它完全通用，没有太多的努力。
I ended up fixing this issue by extending the built in sortable functionality to create a fixedSortable that detects and selectively ignores hovering over lists when there's a overlay in place. For my purposes, I just hard coded the rules, since that suited my needs/time constraints, but you should be able to make it completely generic without too much effort.
首先这里是代码（下面的解释）：
Firstly here's the code (explanation below):
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<style type="text/css">
ul { list-style-type: none; padding: 0; float: left; }
li { margin: 5px; padding: 5px; width: 500px; border: solid 1px #F00; background-color: #FFF; }
#overlayed { position: fixed; top: 0; background-color: #000; margin: 20px; padding: 10px; }
#overlayed li { width: 50px; float: left; }
</style>
<script type="text/javascript">
(function ($, undefined) {
$.widget("ui.fixedSortable", $.ui.sortable, {
_init: function () {
this.element.data("sortable", this.element.data("fixedSortable"));
return $.ui.sortable.prototype._init.apply(this, arguments);
},
_create:function() {
var result = $.ui.sortable.prototype._create.apply(this, arguments);
this.containerCache.sortable = this;
return result;
},
_intersectsWithPointer: function (item) {
//This line....
if (item.instance.element.hasClass("main-list") && this.positionAbs.top + this.offset.click.top < $(window).scrollTop() + 87) {
return false;
}
return $.ui.sortable.prototype._intersectsWithPointer.apply(this, arguments);
},
_intersectsWith: function(containerCache) {
//Also this line....
if (containerCache.sortable.element.hasClass("main-list") && this.positionAbs.top + this.offset.click.top < $(window).scrollTop() + 87) {
return false;
}
return $.ui.sortable.prototype._intersectsWith.apply(this, arguments);
}
});
})(jQuery);
$(function() {
$("ul").fixedSortable({ connectWith: "ul", opacity: 0.6 }).disableSelection();
});
</script>
</head>
<body>
<div id="overlayed">
<ul>
<li>Item X</li>
<li>Item Y</li>
<li>Item Z</li>
</ul>
</div>
<br/><br/><br/><br/><br/>
<ul class="main-list" >
<li>Item 01</li>
<li>Item 02</li>
<li>Item 03</li>
<li>Item 04</li>
<li>Item 05</li>
<li>Item 06</li>
<li>Item 07</li>
<li>Item 08</li>
<li>Item 09</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
</ul>
</body>
</html>
如果您自己修改，则需要更改上面标注的两条注释行。基本上，如果项目被悬停在（ item.instance.element 和 containerCache.sortable）上，则if语句应该求值为true（并返回false）。元素）是不是覆盖图和事件（这个）正在叠加层的范围内发生。这样，主列表永远不会在覆盖的页面位置收到事件。所以在这个代码中，如果主列表出现在屏幕的顶部87个像素中，那么主列表就不会收到任何事件，因为这是我的固定叠加层（这在这个倒下的例子中是不太准确的，但希望它仍然有意义） ）。
If adapting this yourself, you'll need to change the two commented lines marked above. Basically the if statements should evaluate to true (and thus return false) if the item being hovered over (item.instance.element and containerCache.sortable.element) is not the overlay and the event (this) is occurring within the bounds of the overlay. This way the main list never receives events in the location of the page where the overlay is. So in this code the main list doesn't receive any events if they occur in the top 87 pixels of the screen, since that's where my fixed overlay was (which is not quite accurate in this dumbed down example, but hopefully it still makes sense).
这篇关于处理重叠的jQuery可排序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
