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

声明：我只是此答案的投递人员，并未解决此问题。

我想解决它，但后来我发现有人不仅解决了它，而且还包含了一点金色镀层（您也可以将其拖放到新的<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