javascript - 在保持可排序性的同时更改 JqueryUI 可排序元素的类

Question

我正在使用 JqueryUI 对树中一组嵌套的 ol 和 li 元素进行排序。我还在每个叶节点处放置了空的 ol 元素，以便可以将子节点添加到叶节点。

目前空白占位符一直显示并且工作正常。但是我想隐藏它们，直到我开始对 ul 和 li 元素进行排序。
通过使用 Jquery，我可以更改空元素的 css 类以根据需要显示和隐藏它们(添加或删除边框和高度)。我已将它们连接到 .sortable 中的 start 和 stop 事件，此显示/隐藏也有效。

但是，占位符不再作为接受其他可排序元素的区域。

我该如何解决这个问题，以便占位符在更改类后仍然作为有效的可放置区域工作。

注意，我确实保留了占位符元素的 ui-sortable 类。

谢谢。

代码:

$(".sitemapList").sortable(
{
    placeholder: "ui-state-highlight1",
    distance: 5,
    connectWith: ".sitemapList", 
    start: function (event, ui)
    {         
        var change = $(".dontShow");
        var length = change.length;
        for (var i = 0; i < length; i++)
        {
            $(change[i]).attr("class", "sitemapList show ui-sortable");
        }
    },
    stop: function (event, ui)
    {
        var change = $(".show");
        var length = change.length;
        for (var i = 0; i < length; i++)
        {
            $(change[i]).attr("class", "sitemapList dontShow ui-sortable");
        }
    }
});

CSS:

    .siteMap ol.show  
     {
        min-height:28px;
        width:15%;
        /*background-color:#f7eac9;*/
        border:dotted 1px;
     }

    .siteMap ol.dontShow
     {
     }

Answer 1

这是您要找的吗？

http://mjsarfatti.com/sandbox/nestedSortable/