CODEWITHSUNDEEP
jqueryjquery-ui-sortable
Kapil Gupta
Kapil Gupta

Reputation: 81

how to remove duplicates from jquery sortable connected lists?

This is my code for jquery sortable. I want to remove duplicates from sortable2 and sortable3 after dragging the element within it. I tried so many ways but I failed. Please give me a full working code so that I can implement it on my script.

     <html lang="en">
     <head>
     <meta charset="utf-8" />
     <title>jQuery UI Sortable - Connect lists</title>
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
     <link rel="stylesheet" href="/resources/demos/style.css" />
     <style>
     #sortable1, #sortable2, #sortable3 { list-style-type: none; margin: 0; padding: 0 0 2.5em; float: left; margin-right: 10px; width: 200px; height: 200px; border: solid 1px black; }
     #sortable1 li, #sortable2 li, #sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
    </style>
    <script>
    $(function () {


      $("#sortable2").sortable({});

      $("#sortable3").sortable({});
       $("#sortable1").sortable({ });
      $( "#sortable1 li" ).draggable({
            connectToSortable: "#sortable2,#sortable3",
            helper: "clone",
            revert: "invalid"
        });


  });
 </script>
 </head>
 <body>

 <ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default" id="k1">Item 1</li>
  <li class="ui-state-default"id="k2">Item 2</li>
  <li class="ui-state-default"id="k3">Item 3</li>
  <li class="ui-state-default"id="k4">Item 4</li>
  <li class="ui-state-default"id="k5">Item 5</li>
 </ul>

 <ul id="sortable2" class="connectedSortable">

 </ul>

 <ul id="sortable3" class="connectedSortable">

 </ul>



 </body>
 </html>

Upvotes: 1

Views: 2155

Answers (1)

Guillermo Bergengruen
Guillermo Bergengruen

Reputation: 123

I made an example in jsFiddle to solve your problem, or what I think your problem is.

Test it, and tell me if this is what you need.

http://jsfiddle.net/jKzWp/16/

I made a function which tests whether the new item is already in the list, and if so, the item is removed from the list.

This is the js code: 

$(function () {
  $("#sortable2").sortable({
      receive: function (event, ui) {
          var pasteItem = checkList("sortable2", $(this).data().uiSortable.currentItem);
          if (!pasteItem){
               $(this).data().uiSortable.currentItem.remove();
          }
      }
  });

  $("#sortable3").sortable({
      receive: function (event, ui) {
          var pasteItem = checkList("sortable3", $(this).data().uiSortable.currentItem);
          if (!pasteItem){
               $(this).data().uiSortable.currentItem.remove();
          }
      }
  });
   $("#sortable1").sortable({ });
  $( "#sortable1 li" ).draggable({
        connectToSortable: "#sortable2,#sortable3",
        helper: "clone",
        revert: "invalid"
    });


  });



function checkList(listName, newItem){
          var dupl = false;
          $("#" + listName + " > li").each(function(){
        if ($(this)[0] !== newItem[0]){
            if ($(this).html() == newItem.html()){
                dupl = true;
            }
        }
    });

    return !dupl;
}

Good luck with that, Cheers

Upvotes: 5

Related Questions