jquery 可排序 - 选择某些字段时自动填充字段

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

免责声明：我只是这个答案的传递者，并没有解决。

我想解决它，但后来我发现有人不仅解决了它，而且还包括了一点镀金（你也可以 drag/drop/sort 进入新的 <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

jquery 可排序 - 选择某些字段时自动填充字段

jquery sortable - fields automatically populate when certain fields selected

jquery

jquery-ui

jquery-ui-sortable