Question

我已经陷入了困境。我有一堆嵌套的<div>，它们只能在指定的级别上排序。所以，例如：

<div class='level1'></div>
<div class='level1'>
    <div class='level2'></div>
    <div class='level2'></div>
</div>

类'level1'的div不能分类到level2的区域，反之亦然。我工作得很好。现在的问题在于允许某个div：

<div class='label'></div>

要在没有等级限制的情况下进行排序。

以下是我尝试获得此效果：http://jsfiddle.net/Y56sR/4/

这是我实际使用的一个非常简单的版本，但我认为它会让我朝着正确的方向前进。

您会注意到排序任何不是标签的东西都是完美的，包含在其各自的父级中。但是，然后尝试将标签分类到这些区域根本就不能正常工作。它几乎可以工作，但它会让所有人感到紧张，很难把它移到正确的位置。

任何人的想法？我可能需要重新设计html以获得理想的效果，因为我已经有限制的工作了，所以这将是一个很大的一步。

Answer 1

好吧，我设法通过在排序过程中基本撤消嵌套的html来创建一个工作。

显示在此处：http://jsfiddle.net/Y56sR/19/

当您对标签进行排序时，您会注意到这些框不再嵌套，然后允许您将标签放在任何位置。

以下是更改后的代码：

//check if the item being sorted is a label
$(".item").mousedown(function(){
    var label = $(this).find(".link[data-label='1']");
    if(label.length > 0){
        //remove nesting and treat all items equal so sort works properly
        $(".item").each(function(){
            var thisItem = $(this);
            var childItem = thisItem.find(".item");

            childItem.remove();
            thisItem.after(childItem);
        });
        //change items from only rootItem to all items since now they are unnested
        $("#container").sortable({
            items: ".item",
            stop: function(e,ui){
                //renest the html and reapply sortable for non-label here
            }
        });
    }
});

如何使用jQuery sortable允许某些项目使用嵌套列表进行排序

1 个答案: