jQuery ui sortable-元素容器

Question

我有这个html

<div class="container">
<ul id="cont1" class="receiver connectedSortable">

</ul>

<ul id="cont2" class="sender connectedSortable">
  <ul class="receiver connectedSortable ui-state-highlight">type1</ul>
  <ul class="receiver connectedSortable ui-state-highlight">type2</ul>
</ul>
</div>

和这个js

$('.sender').sortable({
    connectWith: $('.receiver'),
    helper: "clone",
    appendTo: ".container",

    start: function (event, ui) {
        $(ui.item).show();
        clone = $(ui.item).clone();
        before = $(ui.item).prev();
        parent = $(ui.item).parent();
    },

    stop: function( event, ui ) {

        parent.prepend(clone);
    }
}).disableSelection();

$('.receiver').sortable().disableSelection();

我想将所有想要的＃cont2 .receiver插入＃cont1中，当我插入一个接收器时，我想在该元素中插入另一个＃cont2 .receiver（＃cont1 .receiver）。如果我插入type1，那么我可以在type1中插入type2，但是当我插入另一个type1时，我不能在其中插入type2。之后，我想在＃cont1

中移动元素

示例：

<ul id="cont1" class="receiver connectedSortable">
    <ul class="receiver connectedSortable ui-state-highlight">type1
        <ul class="receiver connectedSortable ui-state-highlight">type2</ul>
        <ul class="receiver connectedSortable ui-state-highlight">type2</ul>
    </ul>
    <ul class="receiver connectedSortable ui-state-highlight">type1</ul>
</ul>

成为

<ul id="cont1" class="receiver connectedSortable">
    <ul class="receiver connectedSortable ui-state-highlight">type1
        <ul class="receiver connectedSortable ui-state-highlight">type2</ul>
    </ul>
    <ul class="receiver connectedSortable ui-state-highlight">type1
        <ul class="receiver connectedSortable ui-state-highlight">type2</ul>
    </ul>
</ul>