Question

我对jQuery可排序列表有点麻烦，让我感到困惑。

可排序列表包含项目和子列表项目。

我想要实现的目标是：

可以按正常方式排序的主列表项目。
子列表项可在子列表中排序，但也可以连接到主列表。
子列表项只能退回到原始子列表中。
任何主列表项都不应该可以放到子列表中。

这是我到目前为止所做的： jQuery的

$(document).ready(function(){

//get the index of the parent UL and add it as a data property to all child li
$('ul.sublist').each(function(i){
    var thisParentIndex = $('ul.sublist').index(this);
    $(this).data("parentIndex",thisParentIndex);
    $(this).children("li").each(function(){
        $(this).data("parentIndex",thisParentIndex);
    });
});

$('ul.mainlist').sortable({
    connectWith: 'ul.mainlist',
    beforeStop: function(ev, ui) {
        if ($(ui.item).hasClass('hasItems') && $(ui.placeholder).parent()[0] != this) {
            $(this).sortable('cancel');
        }
    }
});

var cancelled = false;

$('ul.sublist').sortable({
    connectWith: 'ul.sublist',
    out: function(ev, ui) {
        if($(this).data("parentIndex") != $(ui.item).data("parentIndex")){
            cancelled = true;
        }
        else{
            cancelled = false;
        }
    },
    stop: function(ev, ui){
        if(cancelled === true){
            $(this).sortable('cancel');
        }
    }
});});

HTML

<ul id="list1" class='mainlist'>
<li>Item 1</li>
<li>Item 2</li>
<li class="hasItems">Item 3
    <ul class="sublist">
        <li>Item 1-1</li>
        <li>Item 1-2</li>
        <li>Item 1-3</li>
        <li>Item 1-4</li>
    </ul>
</li>
<li>Item 4</li>
<li class="hasItems">Item 5
    <ul class="sublist">
        <li>Item 5-1</li>
        <li>Item 5-2</li>
        <li>Item 5-3</li>
        <li>Item 5-4</li>
    </ul>
</li>
    <li class="hasItems">Item 6
    <ul class="sublist">
        <li>Item 6-1</li>
        <li>Item 6-2</li>
        <li>Item 6-3</li>
        <li>Item 6-4</li>
    </ul>
</li>
    <li class="hasItems">Item 7
    <ul class="sublist">
        <li>Item 7-1</li>
        <li>Item 7-2</li>
        <li>Item 7-3</li>
        <li>Item 7-4</li>
    </ul>
</li>

http://jsfiddle.net/4snsa6v7/6/

它几乎就在那里，但我无法弄清楚如何将子列表连接到主列表（然后再回到原始子列表中）。

任何帮助都会被hi-5赞赏。

jQuery可以使用条件子列表进行排序

0 个答案: