jquery sortable - 选择某些字段时自动填充字段

Question

我有一个基本的可排序列表

<ul id="sortable1" class="connectedSortable">        
    <li class="ui-state-default" id="1">1</li>
    <li class="ui-state-default" id="2">2</li>
    <li class="ui-state-default" id="3>3</li>
    <li class="ui-state-default" id="a">a</li>
    <li class="ui-state-default" id="b">b</li>
    <li class="ui-state-default" id="c">c</li>
</ul>

    <div id="sortedFields">
        <ul id="sortable2" class="connectedSortable"></ul>
    </div>

效果很好。我想做但不知道怎么做，就是让一些领域依赖于其他领域。因此，如果我将字段“1”拖到“sortable2”上，那么字段“a”会自动放置在“sortable2”中。如果我将“2”拖到上方，“b”会自动放置在“sortable2”中。

对此很陌生，所以不确定这是否可能，或者这是否超级简单。一直在查看sortable site，但没有弹出任何消息。

Answer 1

免责声明：我只是这个答案的送货人，并没有解决它。

我想解决它，但后来我发现有人不仅解决了它，而且还包括了一点镀金（你也可以拖放/排序到新的<ul>'s）。

这是从这个 S.O. 中找到的代码。线程：Make draggable element sortable within droppable using jQuery UI

HTML：

<ul id="pool" class="connectedSortable">
    <li>foo1</li>
    <li>foo2</li>
    <li>foo3</li>
</ul>

<hr>

<ul class="connectedSortable new"></ul>

<ul class="connectedSortable new hidden"></ul>

JS：

$(function() {
    initSort($('.connectedSortable'));
});

function initSort(element) {
    element.sortable({
        connectWith: '.connectedSortable',
        beforeStop: function(event, ui) {
            var parent = ui.helper.parent();
            if(parent.hasClass('new')) {
                parent.removeClass('new');
                var clone = $('.connectedSortable.new.hidden').clone();
                clone.insertAfter(parent).removeClass('hidden');
                initSort($('.connectedSortable'));
            }
            cleanUp();
        }
    }).disableSelection();
}

function cleanUp() {
    $('.connectedSortable').not('.new, #pool').each(function() {
        if($(this).find('li').length == 0) {
            $(this).remove();
        }
    });
}

CSS：

ul { list-style: none; }
li { cursor: pointer; }

.connectedSortable {
    border: 1px solid;
    padding: 10px;
}

.connectedSortable.new { border: 1px dashed; }

.hidden { display: none; }

JSFIDDLE