在可排序网格上使用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版本,以确保一切都是Kosher,但问题仍然存在.

我真的很难过可能导致这种情况的原因,并且在我尝试新的解决方案时会继续发布更新.

更新: 在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]))而较新版本没有.

在jquery.ui.sortable.js版本1.9.2中的第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我做了伎俩.