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