從jQuery的可排序列表中排除一個或多個元素（使用connectWith）

Question

我有兩個列表，一個ID爲「vlist」，另一個ID爲「hlist」。 「vlist」包含應該可見的元素，而「hlist」包含應該保持隱藏的項目。這裏的想法是允許系統的管理員指定哪些元素/字段應該在註冊頁面上顯示，哪些不應該顯示。這兩個列表使用「connectWith」連接，因此管理員可以將項目從可見列表拖到隱藏列表中（反之亦然）。

我的兩難境地是我想要將鎖定在可見列表中，但仍然可以在該列表中排序。例如，「用戶名」，「電子郵件」和「密碼」字段應該鎖定在可見列表中（因爲它們總是需要用於註冊）。

這甚至可能嗎？也許我現在還沒有發現，這是不言而喻的。我已經瀏覽了jQuery的文檔了一段時間，似乎無法找到與此場景相關的任何內容。我已經找到了如何從列表中的特定元素「完全排序」或者甚至被禁止成爲可放棄的目標，但是這並不能實現。用戶應該仍然能夠將這些項目拖動到「可見」列表中，以防他們想要調整鎖定字段的排序。我也知道你可以在特定元素或DOM對象中包含可排序元素，但這也不能使用，因爲這似乎只適用於整個可排序列表，而不適用於該列表的特定元素。

我甚至想看看我是否建立了排序上市（S）後，像這樣的工作：

$('#vlist > #slist-li-username').sortable('option', 'containment', '#vlist'); 

顯然，沒有工作，要麼否則我不會被張貼本。

如果可能有幫助，我想我會拋出現在使用的代碼;這裏是jQuery代碼：

$(function() 
{ 
$('#vlist, #hlist').sortable 
    ({ 
    connectWith: '.signup-set_flist', 
    forcePlaceholderSize: true, 
    receive: function (event, ui) 
     { 
     var itemID = ui.item.attr('id'); 
     var fID = itemID.replace(/slist-li-/g, ''); 
     var hID = 'slist-' + fID; 
     if (ui.sender.attr('id') == 'vlist') 
      { 
      $('#'+hID).val(''); 
      } 
     else 
      { 
      $('#'+hID).val(fID); 
      } 
     } 
    }).disableSelection(); 
    $('#vlist > #slist-li-username').sortable('option', 'containment', '#vlist'); 
}); 

而且作爲HTML，我將它上傳到這裏（因爲StackOverflow上似乎打破，當我將其粘貼在這裏 - 甚至在代碼模式）：

http://sikosoft.net/jquery-sort-connect.html

Answer 1

也許這可以幫助你：

http://jqueryui.com/demos/sortable/#items

這是鎖定元素的列表，你問之前。

Answer 2

您所看到的特定功能很難構建，但也許這有任何幫助。

每當排除的項目移動到連接列表時觸發取消事件。只要給排除的項目一些特殊的屬性（類）。

HTML

<ul class="sortables"> 
    <li>Element_1</li> 
    <li class="excluded">Element_2</li> 
    <li class="excluded">Element_3</li> 
    <li>Element_4</li> 
</ul> 

<ul class="sortables"> 
    <li>Element2_1</li> 
    <li>Element2_2</li> 
    <li>Element2_3</li> 
    <li>Element2_4</li> 
</ul> 

JS

$(".sortables").sortable({ 
    connectWith: '.sortables', 
    over: function(){ 
    if($(ui.item.hasClass('excluded')){ 
     $(ui.sender).sortable('cancel'); 
    } 
}); 

Answer 3

我知道這是一個很古老的問題..但我遇到了同樣的問題，幾個小時前..並不能找到回答...在大量的挖掘周圍..我想出了這個..「不知道我不得不打電話刷新方法！「

反正基本上都是我在這裏做的是： 如果我在整理我暫時禁用與其他列表的連接，並在分揀過程結束時恢復它的開始檢測排除元素 這將繼續。 。元素的列表中的排序..但沒有連接到其他列表

希望這可以幫助任何人

HTML

<ul class="first_list"> 
    <li>Element_1</li> 
    <li class="excluded">Element_2</li> 
    <li class="excluded">Element_3</li> 
    <li>Element_4</li> 
</ul> 

<ul class="second_list"> 
    <li>Element2_1</li> 
    <li>Element2_2</li> 
    <li>Element2_3</li> 
    <li>Element2_4</li> 
</ul> 

JS：

var firstList = $(".first_list"); 
var secondList = $(".second_list"); 

firstList.sortable({ 
    connectWith: ".second_list" 
    start: function(event, ui) { 
     if (ui.item.hasClass("exclude")) { 
      firstList.sortable("option", "connectWith", false); 
      firstList.sortable("refresh"); 
     } 
    }, 
    stop: function(event, ui) { 
     if (ui.item.hasClass("exclude")) { 
      firstList.sortable("option", "connectWith", ".second_list"); 
      firstList.sortable("refresh"); 
     } 
    }); 

secondList.sortable({ 
    connectWith: ".first_list" 
});​