在可排序网格上使用 connectWith 时 JQuery 可排序中断

Question

我一直在使用 JQuery 可排序网格，并且遇到了一个奇怪的问题，即当有 2 个或更多与 connectWith 选项链接的可排序网格时，拖动/占位符会中断。到目前为止，我已经在 Chrome、Firefox 和 Safari 中测试并确认了相同的行为。

看起来好像拖动忽略了鼠标位置，占位符位置显得有些随机。

示例： http://wilhall.com/tests/apptest.html

使用connectWith未连接网格时，上述问题已修复：

示例： http://wilhall.com/tests/apptest_2.html

本能地，我决定把我的代码扔到 jsfiddle 中来发布这个问题，但是当我这样做时，在 jsfiddle 上查看时错误不存在：

小提琴： http://jsfiddle.net/B2ddx/1/

以下是我对两个可排序网格的配置选项：

       $(".modules.app").sortable({
            cursor: "move",
            distance: 1,
            revert: 100,
            scroll: true,
            tolerance: "intersect",
            opacity: 0.6,
            connectWith: ".modules.bin",
            placeholder: "placeholder",
            forcePlaceholderSize: true
        }).disableSelection();

        $(".modules.bin").sortable({
            cursor: "move",
            distance: 1,
            revert: 100,
            scroll: true,
            tolerance: "intersect",
            opacity: 0.6,
            connectWith: ".modules.app",
            placeholder: "placeholder",
            forcePlaceholderSize: true
        }).disableSelection();

我更新了我的示例页面，使其不包含除 jquery 和 jquery-ui 之外的外部 CSS 或 JS，现在使用与 jsfiddle 相同的 jquery 和 ui 版本，以确保一切都符合要求，但问题仍然存在。

我真的不知道是什么原因造成的，我会在尝试新的解决方案时继续发布更新。

更新： 在 JSFiddle 中，connectTo 选项无法正常工作，并且实际上并未链接列表 - 这就是问题不存在的原因。

此外，当可排序的li 元素未浮动时，问题也不存在。

更新： 按照建议，我删除了包含可排序项目的元素的任何百分比高度，这解决了问题，但又创建了另一个问题：没有任何高度（容器的高度为 0），项目无法在两个可排序网格之间拖动。

为了解决这个问题，我尝试将float:left 和/或height: 500px 添加到可排序容器中，但出现了同样的问题。

---

这是一个简化的 JSFiddle 展示了这个问题： http://jsfiddle.net/y8xrZ/

如果您从.sortable 调用中删除connectWith 选项，问题就会消失。 请注意，此错误会影响使用 connectWith 的可排序容器。因此，在示例中，仅从 #app 容器中删除 connectWith 可以仅解决#app 容器的问题，但不能解决#bin 容器的问题。

Answer 1

感谢您找到 re jQueryUI 版本，我能够解决这个问题。

最大的线索当然是设置connectWith 选项时的行为。我翻遍了jquery.ui.sortable.js文件，发现问题似乎是_contactContainers方法引起的，虽然我不知道为什么。

知道 jQuery UI 1.8.24 确实有效，我比较了两者中的可排序文件。尽管即使在 _contactContainers 方法中这两个文件之间似乎也存在很多差异，但似乎归结为 if-else 块中的差异。在这种情况下，旧版本有条件 (else if(this.currentContainer != this.containers[innermostIndex]))，而新版本没有。

在 1.9.2 版本的 jquery.ui.sortable.js 的第 734 行，我们看到一个 if-else 块，开头是这样的：

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else {
....

只要改成这样：

// move the item into the container if it's not there already
if(this.containers.length === 1) {
    this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
    this.containers[innermostIndex].containerCache.over = 1;
} else if(this.currentContainer != this.containers[innermostIndex]) {

将该条件添加到 else 对我来说是成功的。

Answer 2

我认为您应用到 ul 元素的显式高度和宽度规则就是这样做的。当我在 .modules 类中禁用这些规则时，事情似乎正常工作。因此，请从 .modules 类中删除以下行：

height: 100%;
width: 100%;

通常都知道指定高度百分比是有问题的（或者至少曾经是），所以我建议不要这样做。

Answer 3

这已在 jQuery UI 1.10.2 中修复 遇到了同样的问题并切换到最新的稳定版本。

Answer 4

我也有这个问题。 jQuery UI 上的示例代码说要浮动您的项目以创建网格。对我来说，解决方法是将 CSS 改为使用 inline-block，正如 jQuery UI 上 Ticket#4551 底部的解释 - http://bugs.jqueryui.com/ticket/4551:

将 float: left 改为 display: inline-block

例如：

<style>
  #sortable1 li, #sortable2 li { display: inline-block; }
</style>

html 是这样的：

<ul id="sortable1" class="connectedSortable">
    <li>
       <div class="grid-box">
           ...
       </div>
    </li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li>
       <div class="grid-box">
           ...
       </div>
    </li>
</ul>