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，现在使用相同的jquery＆amp; ui版本为jsfiddle，以确保一切都是犹太洁食，但问题仍然存在。

我真的很难过会导致这种情况，并会在我尝试新的解决方案时继续发布更新。

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

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

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

要解决此问题，我尝试将float:left和/或height: 500px添加到可排序容器中，但同样存在问题。

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

如果您从connectWith来电中删除.sortable选项，问题就会消失。请注意，此错误会影响使用connectWith的可排序容器。因此，在示例中，仅从connectWith容器中删除#app修复了#app容器的问题仅，而不是#bin容器

Answer 1

感谢您找到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更改为使用内联块，如jQuery UI上的Ticket＃4551底部所述 - http://bugs.jqueryui.com/ticket/4551：

将浮动：左侧更改为显示：内联块

例如：

<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>

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

4 个答案: