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

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

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

Answer 1

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

调整可排序 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();