Prevent Duplicated Item In JQueryUI Sortable

Fiddle Example I was trying to prevent duplicated items from being dragged into #sort2 from #sort by using a condition to check if there were identical items based on their title a

Solution 1:

I found a solution. The original example removes all the images with the same title, so my method is use img.filter(":gt(0)").remove(); to remove just the first duplicated.

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();
});