Question

我正在尝试编写一个页面，允许用户在两个列表之间拖动项目，然后重新排序。

我左边有一个主列表，右边有一个“桶”列表。这个想法是让用户在页面中移动时将项目放在桶中作为保留区域（主列表可以变得很长，所以让它们在滚动到其他地方放置它们时将它们放在桶中是有用的）

为了实现这一点，我将“桶”定位在页面上的固定位置，以便它与用户一起滚动。由于浏览器大小不同，“存储桶”可能与主列表重叠。发生这种情况时，如果项目从主列表拖动到存储桶，则如果鼠标光标位于主列表和存储桶之间的重叠区域，则存储桶将不会收到该项目。

重现问题：

这是一些重现问题的HTML（它模拟了存储桶浮动在主列表顶部的情况）：

<!DOCTYPE html>
<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
    <style>
      ul { list-style-type: none; margin: 0; padding: 0; border: 1px solid #777; }
      li { margin-bottom: 2px; background-color: #EEE; border-bottom: 1px solid #BBB; width: 300px; height: 40px; }
      #main-list { z-index: -1; width: 300px; }
      #bucket { width: 202px;  position: fixed; top: 20px; left: 250px; border: 3px solid #CCC; }
      #bucket-list { z-index: 999; min-height: 300px; width: 200px; }
      #bucket-list li { width: 200px; }
      .placeholder { background-color: #28D; }
    </style>
    <script>
        $(function() {
            $( "#main-list, #bucket-list" ).sortable({
                scroll: false,
                connectWith: ".connectedSortable",
                placeholder: "placeholder",
                tolerance: "pointer"
            }).disableSelection();
        });
    </script>
</head>
<body>
    <ul id="main-list" class="connectedSortable">
        <li>Foo1</li>
        <li>Foo2</li>
        <li>Foo3</li>
        <li>Foo4</li>
        <li>Foo5</li>
        <li>Foo6</li>
        <li>Foo7</li>
        <li>Foo8</li>
        <li>Foo9</li>
        <li>Foo10</li>
        <li>Foo11</li>
    </ul>

    <div id="bucket">
        <ul id="bucket-list" class="connectedSortable">
            <li>Bar1</li>
            <li>Bar2</li>
            <li>Bar3</li>
        </ul>
    </div>
</body>
</html>

在浏览器中渲染HTML，然后单击并将项目“Foo6”拖动到“条形图”列表（存储桶）中。将项目缓慢拖动到桶的侧面，并注意到拖动器无法识别拖动器，直到光标穿过两个列表重叠的边界。

问题：

在两个jQueryUI可排序重叠的情况下，我希望顶部可视的排序可以在拖动时放置可拖动的，而不是在视觉下方的可排序。
我怎么能这样做？

谢谢！

使用具有重叠列表的多个jQuery UI可排序项

0 个答案: