JQuery UI 可排序的奇怪占位符行为

Question

我有以下 JSFiddle：

https://jsfiddle.net/353fa42p/4/

以下是 JS 文件的简单摘录：

$( document ).ready(function() {

    $(".box-item-scroll-contents").sortable({
        appendTo: "body",
        connectWith: ".item-objects-area,.box-item-scroll-contents",
        handle: ".drag",
        items: ".box-item,.box-item-object"
    }).disableSelection();

    $(".item-objects-area").sortable({
        appendTo: "body",
        connectWith: ".box-item-scroll-contents,.item-objects-area",
        handle: ".drag-inner",
        items: ".box-item-object,.box-item"
    }).disableSelection();

    $(".open").on("click", function(){
        var objArea = $(this).closest(".box-item").find(".item-objects-area");
        if( objArea.is(":visible") ){
            objArea.hide();
        }
        else{
            objArea.show();
        }
    });
});

如果您将 'item 4' 向上拖动到列表的左侧，则占位符不会出现。现在，如果您重置位置，然后将 'item 4' 向上拖动到列表的右侧，占位符将显示 ok ！现在，如果您再次放置这些位置并向上打开 'item 5'，然后将 'item 4' 向上拖动到列表中，则无论将占位符拖动到列表的哪一侧，占位符都可以正常工作！关于导致这种不稳定行为的原因有什么想法吗？

注意：页面上会有多个 'box-item-scroll-area' 块，因此 'box-item-scroll-area' 和 'item-objects-area' 中的项目需要在它们之间以及这些列表之间互换在页面上的其他 'box-item-scroll-area' 个块中。

Answer 1

您通常希望引用最顶层的 class 或 id，可排序的 connectWith。

调整您的 sortable connectWith 属性以使用 .box-item 解决此不稳定行为。

原文：

$(".box-item-scroll-contents").sortable({
    appendTo: "body",
    connectWith: ".item-objects-area,.box-item-scroll-contents",
    handle: ".drag",
    items: ".box-item,.box-item-object"
}).disableSelection();

工作版本（参见此处的 jsfiddle：https://jsfiddle.net/sz2hvme4/）

$(".box-item-scroll-contents").sortable({
    appendTo: "body",
    connectWith: ".box-item",
    handle: ".drag",
    items: ".box-item,.box-item-object"
}).disableSelection();

Answer 2

问题是在隐藏容器上初始化 sortable。这可以通过在 .item-objects-area 可见后初始化 sortable 来解决，然后在隐藏时销毁 sortable 。不理想，但它有效。下面以'open'函数的调整来说明：

$(".open").on("click", function(){
    var objArea = $(this).closest(".box-item").find(".item-objects-area");
    if( objArea.is(":visible") ){
        if (objArea.hasClass('ui-sortable')) {
            objArea.sortable("destroy");
        }
        objArea.hide();
    }
    else{
        objArea.show();
        if (!objArea.hasClass('ui-sortable')) {
            objArea.sortable({
                appendTo: "body",
                connectWith: ".box-item-scroll-contents,.item-objects-area",
                handle: ".drag-inner",
                items: ".box-item-object,.box-item"
            }).disableSelection();
        }
    }
});

您还需要在外部 (.box-item-scroll-contents) 和嵌套 (.item-objects-area) 容器上初始化 sortable - 这里是调整后的 JSFiddle 以完整显示工作示例： https://jsfiddle.net/353fa42p/9/

JQuery UI 可排序的奇怪占位符行为

JQuery UI Sortable strange placeholder behaviour

jquery

jquery-ui

jquery-ui-sortable