javascript - prevent duplicated item in jQueryUI sortable -


fiddle example

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.

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

Comments

Popular posts from this blog

javascript - how to protect a flash video from refresh? -

android - Associate same looper with different threads -

visual studio 2010 - Connect to informix database windows form application -