2013-03-27 59 views
3

與標題中一樣,如何防止2個列表之間的重複。我正試圖阻止#selected列表中的重複項。我懷疑它在接收事件中完成,但我沒有任何運氣。jquery可排序 - 防止2個列表之間的重複

$(function() { 

    $("#options").sortable({ 
     connectWith: $("#selected"), 
     helper: 'original', 
     revert: true, 
     tolerance: "pointer", 
    }); 

    $("#selected").sortable({ 
     connectWith: $("#options"), 
     helper: 'original', 
     receive: function (event, ui) {    
     }, 
    }); 

    $("#options,#selected").disableSelection(); 

    $("#SkillGroups").change(function() { 
     $.ajax({ 
      type: "POST", 
      url: "/Contractor/Contractor/GetSkillsBySkillGroup", 
      data: { skillGroupId: $("#SkillGroups").val() }, 
      success: function (result) { 
       $loadList(result); 
      } 
     }) 
    }); 
}); 

回答

7

終於搞定了。當你看到解決方案時有點顯而易見。也可能有其他方法來做到這一點。

$("#selected").sortable({ 
     connectWith: $("#options"), 
     helper: 'original', 
     receive: function (event, ui) { 

      var identicalItemCount = $("#selected").children('li:contains(' + ui.item.text() + ')').length; 
      alert(identicalItemCount); 
      if (identicalItemCount > 1) { 
       alert("Ahem.... we have a duplicate!!"); 
       $("#selected").children('li:contains(' + ui.item.text() + ')').first().remove(); 
      } 
     }, 
    }); 
+0

非常好。不過,我想知道爲什麼我建議的功能沒有做到它所要做的。 – Todd 2013-03-30 02:23:13

+0

請接受將問題標記爲已解決的解決方案... :) – 2014-08-16 11:49:55

0

使用jquery.unique()HERE。從DOM元素數組中刪除重複項。

var l = $('#options, #selected').find('li').get(); 

    var lists = jQuery.unique(l); 

    // build your new lists w/ $('#options').html() etc... 

編輯

HERE'S a working jsFiddle

所以,你需要什麼,以確保當你調用這個方法,你DOM元素的陣列上這樣做,而不是字符串或數字。另外,請確保您使用的是JQuery別名($)而不是JQuery.methodName。這個例子包括了作品,剩下的唯一事情就是將它與從你的加載列表函數創建的Elements綁定,然後一旦過濾就將它們吐出到各自的uls中。

+0

我試過這個#selected列表的接收事件,它不起作用。 – Greg 2013-03-27 21:38:53

+0

感謝您的回覆。我檢查了小提琴,最後的名單中仍然有重複。 li#o3和li#s3仍然是重複的。 – Greg 2013-03-28 08:18:01

+0

嗯,這是消除dups的一種方法,但是這個方法的問題在於它會完全破壞用戶放置它們物品的任何順序......這種方式擊敗了在第一個中使用jQuery UI-Sortable的目的地方,不是嗎? – mkoistinen 2014-01-07 01:56:44

0

如果您想要基於檢查data- *屬性來做同樣的解決方案。我只是遇到了這個問題,希望它能幫助別人。

receive: function (event, ui) { 

    var identicalItemCount = $(this).children("li[data-yourattribue='" + somevalue + "']").length; 
    //alert(identicalItemCount); 
    if (identicalItemCount > 1) { 
     //alert("Ahem.... we have a duplicate!!"); 
     $(this).children("li[data-yourattribue='" + somevalue + "']").last().remove(); 
    } else { 

     //your other stuff (like ajax calls, etc..) 

    } 

}, 

如果你做一些Ajax像保存在session一些額外的數據與掉落的物品一起,它也可以刪除有用的實際下降投擲的,而不是一個存在於系統中已經使用。持續()。