Alc*_*nja 9 javascript jquery drag-and-drop fixed jquery-ui-sortable
这是一个不起眼的问题,但我正在使用jQuery Sortables并试图让两个连接列表很好地协同工作fixed.一切正常,直到你滚动页面,使两个列表最终位于彼此的顶部.然后列表似乎对哪一个应该接收被拖动的项目感到困惑,这意味着当每个列表中出现/消失时,会发生一堆抖动.
看起来问题是两个列表都在处理鼠标/排序事件,因为被拖动的项目在技术上是在两个列表上,但我想要的是让覆盖列表(即position: fixed一个)吞下事件以便底层主要列表不会尝试接收该项目.
这是最小的代码示例:
<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>
所以问题是,我该如何解决？
我最后通过扩展内置sortable功能来修复此问题,以创建一个fixedSortable检测并选择性地忽略在有覆盖的情况下将鼠标悬停在列表上.出于我的目的,我只是硬编码规则,因为这符合我的需求/时间限制,但你应该能够完全通用而不需要太多努力.
首先是代码(下面的解释):
<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.element)上的项目不是叠加层并且事件(this)在叠加层的边界内发生,那么基本上if语句应该评估为真(并因此返回false).这样,主列表永远不会在覆盖所在的页面位置接收事件.因此,在此代码中,如果主列表出现在屏幕的前87个像素中,则主列表不会接收任何事件,因为那是我的固定叠加层所在的位置(在这个愚蠢的示例中这不太准确,但希望它仍然有意义).