javascript - prevent duplicated item in jQueryUI sortable -
i trying prevent duplicated items being dragged #sort2
#sort
using condition check if there identical items based on title attributes in #sort2
. if there duplicated, remove old 1 before appending new one
$("#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); } });
but attempt didn't work, removes item being dragged #sort2
. can show me how that?
$("#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>
i found solution. original example removes images same title, method use img.filter(":gt(0)").remove();
remove first duplicated.
$("#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(); });
Comments
Post a Comment