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();
        }
    });
});

如果将“项目4”向上拖动到列表的左侧，则不会显示占位符。现在，如果您重置位置，然后将“项目4”向上拖动到列表的右侧，占位符显示正常！现在，如果您再次休息并打开“项目5”，然后将“项目4”向上拖动，无论列表的哪一侧被拖动，占位符都能正常工作！关于是什么导致这种不稳定的行为的任何想法？

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

Answer 1

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

调整可排序的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").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可排序的奇怪占位符行为

2 个答案: