在可排序网格上使用connectWith时，JQuery可排序中断 [英] JQuery sortable breaks when using connectWith on sortable grids

问题描述

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

I have been working with JQuery sortable grids, and have run into a strange problem where the dragging/placeholders break when there are 2 or more sortable grids linked with the connectWith option. So far, I have tested and confirmed the same behavior in Chrome, Firefox, and Safari.

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

It appears as though dragging ignores the mouse position and the placeholder position appears somewhat randomly.

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

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

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

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

Instinctively, I decided to throw my code into jsfiddle to post this question, but when I did so, the error was not present when viewed on jsfiddle:

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

Fiddle: http://jsfiddle.net/B2ddx/1/

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

The following is my configuration options for the two sortable grids:

       $(".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& ui版本为jsfiddle，以确保一切都是犹太洁食，但问题仍然存在。

I updated my example pages to include no external CSS or JS other than jquery and jquery-ui, and now use the same jquery & ui versions as jsfiddle, to make sure everything is kosher, but still the problem persists.

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

I am really stumped as to what could be causing this, and will continue posting updates as I try new solutions.

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

Update: In JSFiddle, the connectTo option is not working properly, and is not actually linking the lists - which is why the problem does not exist there.

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

Also, the problem is not present when the sortable li elements are not floated.

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

Update: As suggested, I removed any percent heights of the elements containing the sortable items, which fixed the problem but created another one: without any height (the containers took on 0 height), items could not be dragged between the two sortable grids.

要解决此问题，我尝试添加 float：left 和/或 height：500px 到可排序的容器，但同样的问题是pr esent。

To fix this, I tried adding float:left and/or height: 500px to the sortable containers, but the same problem was present.

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

如果从 .sortable 调用中删除 connectWith 选项，问题就会消失。
请注意，此错误会影响使用 connectWith 的可排序容器。因此，在示例中，仅从 #app 容器中删除 connectWith 修复了仅的问题>对于 #app 容器，但不包含 #bin 容器。

If you remove the connectWith option from the .sortable calls, the problem disappears. Note that this error effects the sortable container that is using connectWith. So, in the example, removing connectWith just from the #app container fixes the problem only for the #app container, but not for the #bin container.

推荐答案

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

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

最大的线索当然是设置 connectWith 选项时的行为。我通过 jquery.ui.sortable.js 文件进行搜索，发现问题似乎是由 _contactContainers 方法，虽然我无法弄清楚原因。

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.

知道jQuery UI 1.8.24确实有效，我比较了两者中的可排序文件。虽然在 _contactContainers 方法中两个文件之间似乎存在很多差异，但似乎在if-else块中出现了差异。在这种情况下，旧版本有一个条件（否则if（this.currentContainer！= this.containers [innermostIndex]））而新版本没有。

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.

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

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

只需将其更改为：

// 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 为我做了诀窍。

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

这篇关于在可排序网格上使用connectWith时，JQuery可排序中断的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！