处理重叠的jQuery可排序列表

这是一个不起眼的问题，但是我正在使用jQuery Sortables并试图让两个连接列表在一个fixed位置时很好地协同工作。 一切正常，直到你滚动页面，使两个列表最终位于彼此的顶部。 然后列表似乎对哪一个应该接收被拖动的项目感到困惑，这意味着当每个列表中出现/消失时会发生一堆抖动。

看起来问题是两个列表都处理鼠标/排序事件，因为被拖动的项目在技术上是在两个列表上，但我想要的是使覆盖列表（即position: fixed ）吞下事件，以便底层主列表不会尝试接收该项目。

这是最小的代码示例： 

      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; }   $(function() { $("ul").sortable({ connectWith: "ul", opacity: 0.6 }).disableSelection(); });    
 
     
  • Item X
    •  
  • Item Y
    •  
  • Item Z
    •  
 
 




 
     
  • Item 01
    •  
  • Item 02
    •  
  • Item 03
    •  
  • Item 04
    •  
  • Item 05
    •  
  • Item 06
    •  
  • Item 07
    •  
  • Item 08
    •  
  • Item 09
    •  
  • Item 10
    •  
  • Item 11
    •  
  • Item 12
    •  
  • Item 13
    •  
  • Item 14
    •  
  • Item 15
    •  
  • Item 16
    •  
  • Item 17
    •  
  • Item 18
    •  
  • Item 19
    •  
  • Item 20
    •  
  • Item 21
    •  
  • Item 22
    •  
  • Item 23
    •  
  • Item 24
    •  
  • Item 25
    •  
  • Item 26
    •  
  • Item 27
    •  
  • Item 28
    •  
  • Item 29
    •  
  • Item 30
    •

所以问题是，我该如何解决？

我最后通过扩展内置的sortablefunction来修复这个问题，以创建一个fixedSortable ，当存在覆盖时，它检测并选择性地忽略在列表上的hover。 出于我的目的，我只是硬编码规则，因为这符合我的需求/时间限制，但你应该能够完全通用而不需要太多努力。

首先是代码（下面的解释）： 

         
 
     
  • Item X
    •  
  • Item Y
    •  
  • Item Z
    •  
 
 




 
     
  • Item 01
    •  
  • Item 02
    •  
  • Item 03
    •  
  • Item 04
    •  
  • Item 05
    •  
  • Item 06
    •  
  • Item 07
    •  
  • Item 08
    •  
  • Item 09
    •  
  • Item 10
    •  
  • Item 11
    •  
  • Item 12
    •  
  • Item 13
    •  
  • Item 14
    •  
  • Item 15
    •  
  • Item 16
    •  
  • Item 17
    •  
  • Item 18
    •  
  • Item 19
    •  
  • Item 20
    •  
  • Item 21
    •  
  • Item 22
    •  
  • Item 23
    •  
  • Item 24
    •  
  • Item 25
    •  
  • Item 26
    •  
  • Item 27
    •  
  • Item 28
    •  
  • Item 29
    •  
  • Item 30
    •

如果您自己进行调整，则需要更改上面标记的两条注释行。 如果正在hover的项目（ item.instance.element和containerCache.sortable.element ） 不是覆盖并且事件（ this ）发生在覆盖范围内，则if语句基本上应该求值为true（因此返回false）覆盖。 这样，主列表永远不会在覆盖所在的页面位置接收事件。 因此，在此代码中，如果主列表出现在屏幕的前87个像素中，则主列表不会收到任何事件，因为那是我的固定叠加层所在的位置（在这个愚蠢的示例中这不太准确，但希望它仍然有意义）。

我将更改实现为可排序，以便将z-index考虑在内。

请看我的叉子： https ： //github.com/david04/jquery-ui/commit/feaf94ebabacee4d11b5e98c412d795d68ca9d51 （10行代码，非常简单的更改）

调用sortable时，您需要添加选项compareZIndex=true 。

这是我认为你遇到的错误，修复更简单：

http://bugs.jqueryui.com/ticket/7065

我在一个页面上遇到了这个问题，我在第二个列表的垂直上方有一个列表。 即使溢出被设置为隐藏，顶部列表的看不见的溢出仍然阻止其下方列表的移动事件（这可以通过在顶部列表中设置溢出到自动来帮助可视化重叠来确认）。 这是一个z指数问题。

我的修复是将此代码放在可排序的停止事件中： 

  //expliclty hide the overflow items $('.topList .item:gt(5)').hide(); $('.topeList .item:first').show();

我在这里做的是显式隐藏顶部列表元素，只留下前5个可见，以便顶部和底部列表之间没有DOM偏移重叠。

Interesting Posts

选择刚刚附加了jquery的选项

在SugarCRM editview中添加自定义jQueryvalidation

子对象的自定义确认对话框回调

jQuery – 使全局变量可用于多个插件

如何检测用户鼠标移动的距离？

jQuery在特定元素之后获取DOM中的下一个匹配项

让用户滚动停止jtopery scrolltop的动画？

什么是最好的JSON JavaScript polyfill

将CSS宽高比设置为宽度的倒数？

从更新范围滑块获取价值？