防止重複項jQueryUI的排序

Question

Fiddle Example

我試圖防止重複的項目從通過使用條件被拖入#sort2從#sort，以檢查是否有根據自己的冠軍#sort2屬性相同的項目。如果有一個重複，它會刪除舊追加新的

$("#sort2").sortable({ 
    receive: function (e, ui) { 
    var title = ui.item.attr('title'); 
    var img = $('#sort2').find('img[title="'+title+'"]'); 
    console.log(title);    
    if(img.length) 
    { 
     img.remove(); 
    } 
    ui.sender.data('copied', true); 
    } 
}); 

之前，但我嘗試沒有工作，它只是儘快刪除任何項目，因爲它是被拖入#sort2。任何人都可以告訴我該怎麼做？

$("#sort").sortable({ 
    connectWith: ".connectedSortable", 

    helper: function (e, li) { 
     this.copyHelper = li.clone().insertAfter(li); 

     $(this).data('copied', false); 

     return li.clone(); 
    }, 
    stop: function() { 
     var copied = $(this).data('copied'); 
     if (!copied) { 
      this.copyHelper.remove(); 
     } 
     this.copyHelper = null; 
    } 
}); 

$("#sort2").sortable({ 
    receive: function (e, ui) { 
    var title = ui.item.attr('title'); 
    var img = $('#sort2').find('img[title="'+title+'"]'); 
     console.log(title);    
    if(img.length) 
    { 
     img.remove(); 
    } 
    ui.sender.data('copied', true); 
    } 
}); 

$('#sort2').on('click','img',function(){ 
    $(this).remove(); 
}); 

HTML：

<div class='connectedSortable' id='sort'> 
    <img title='AAA' src='http://upload.wikimedia.org/wikipedia/commons/7/7f/Wikipedia-logo-en.png'/> 
    <img title='BBB' src='http://upload.wikimedia.org/wikipedia/commons/thumb/4/4c/Wikisource-logo.svg/32px-Wikisource-logo.svg.png'/> 
</div> 

<div class='connectedSortable' id='sort2'></div> 

Answer 1

我找到了解決辦法。原始示例刪除所有具有相同標題的圖像，因此我的方法是使用img.filter(":gt(0)").remove();刪除第一個重複的。

Example

$("#sort").sortable({ 
    connectWith: ".connectedSortable", 

    helper: function (e, li) { 
     this.copyHelper = li.clone().insertAfter(li); 

     $(this).data('copied', false); 

     return li.clone(); 
    }, 
    stop: function() { 
     var copied = $(this).data('copied'); 

     if (!copied) { 
      this.copyHelper.remove(); 
     } 

     this.copyHelper = null; 
    } 
}); 

$("#sort2").sortable({ 
    receive: function (e, ui) { 
    var title = ui.item.attr('title'); 
    var img = $('#sort2').find('img[title="'+title+'"]'); 
    console.log(title);    
    if(img.length) 
    { 
     img.filter(":gt(0)").remove(); 
    } 
    ui.sender.data('copied', true); 
    } 
}); 

$('#sort2').on('click','img',function(){ 
    $(this).remove(); 
});