3

我一直在使用 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/

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

4

4 回答 4

10

Thanks to your find re jQueryUI version, I was able to work this one out.

The biggest clue is of course the behaviour when a connectWith option is set. I hunted through the jquery.ui.sortable.js file, and found that the problem seemed to be caused in the _contactContainers method, although I could not figure out why.

Knowing that jQuery UI 1.8.24 does work, I compared the sortable file in both. While there appear to be quite a number of differences between the two files even in the _contactContainers method, it seems to come down to a difference in an if-else block. In this case, the older version has a condition (else if(this.currentContainer != this.containers[innermostIndex])) whereas the newer one does not.

At about line 734 in jquery.ui.sortable.js in version 1.9.2, we see an if-else block that begins like this:

// 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 {
....

Just change it to this:

// 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]) {

Adding that condition to the else did the trick for me.

于 2013-01-30T06:12:23.523 回答
1

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

height: 100%;
width: 100%;

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

于 2013-01-25T03:14:47.627 回答
1

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

于 2013-04-24T16:46:04.627 回答
0

我也有这个问题。jQuery UI 上的示例代码说要浮动您的项目以创建网格。对我来说，解决方法是将 CSS 更改为使用 inline-block，如 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>
于 2014-04-29T18:10:26.993 回答