How to sort multiple items in different lists in JQuery UI?

Question

I have 4 lists. The lower list from which I take the items, if I drop item on the first list, it will make clones in the lower two lists.

I need ability just take element in top line and it takes clones too and i can move it left or right, like multi sorting.

$(function() {
    $( "ul.droptrue" ).sortable({
      connectWith: "ul.one",


    });

    $( "ul.dropfalse" ).sortable({
      connectWith: "ul.droptrue",
      dropOnEmpty: true,
      appendTo: 'ul.droptrue',
    });

 $("ul.droptrue").on('mousedown', '#ex1', function () {

 });


    $( "ul#first" ).sortable({
        connectWith: $( "ul#second" ),
            receive: function(event, ui) { 
                var idel = ui.item.attr('id');
                var wordIdplusclass = "child" + ui.item.attr('id');
                ui.item.clone().appendTo('#second, #third').addClass('draggable1');
                $(this).sortable('cancel');
            },
    });





    $( "ul.droptrue, ul.dropfalse" ).disableSelection();



    $( ".selectable" ).selectable();

  }); 

Help me. http://jsfiddle.net/gr5w07ax/

IMG example: http://i57.tinypic.com/205p64l.png

Answer 1

First of all, you shouldn't simply append clones of an element having id attribute, which will result in multiple elements having the same id which is invalid.

So, we can remove the id while cloning and use a data-* attribute instead to group similar elements:

ui.item.removeAttr("id").attr("data-id", idel).clone().appendTo('#second, #third').addClass('draggable1');

Now, when an item from first <ul> is being dragged, we find the other clones, position them absolute like jQuery UI does, and then set their position properties (top, left etc) to the ui.position:

sort: function (event, ui) {
  var id = ui.item.data("id"),
  items = $("ul.droptrue").find("[data-id='" + id + "']").not(ui.item);
  items.css($.extend({position: "absolute"}, ui.position))
}

For this to work, we should set the parent <ul>'s to position:relative.

---

$(function() {
  $("ul.droptrue").sortable({
    connectWith: "ul.one",
  });
  $("ul.dropfalse").sortable({
    connectWith: "ul.droptrue",
    dropOnEmpty: true,
    appendTo: 'ul.droptrue',
  });
  $("ul#first").sortable({
    connectWith: $("ul#second"),
    sort: function(event, ui) {
      var id = ui.item.data("id"),
        items = $("ul.droptrue").find("[data-id='" + id + "']").not(ui.item);
      items.css($.extend({
        position: "absolute"
      }, ui.position))
    },
    receive: function(event, ui) {
      var idel = ui.item.attr('id');
      ui.item.removeAttr("id").attr("data-id", idel).clone().appendTo('#second, #third').addClass('draggable1');
      $(this).sortable('cancel');
    }
  });

  $("ul.droptrue, ul.dropfalse").disableSelection();
});

* {
  margin: 0;
  padding: 0;
}
.content {
  width: 300px;
}
.one {
  position: relative;
  width: 100%;
  height: 50px;
  border: 1px solid blue;
}
.second {
  width: 100%;
  height: 50px;
  margin-top: 50px;
  border: 1px solid green;
}
.elem {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: #ccc;
}
ul {
  margin: 0;
  padding: 0;
  height: 100%;
}
.one li,
.two li {
  float: left;
  margin: 0;
  padding: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="content">
  <div class="eventsline">
    <ul class="one droptrue selectable" id="first"></ul>
    <ul class="one droptrue selectable" id="second"></ul>
    <ul class="one droptrue selectable" id="third"></ul>
    <div class="second">
      <ul class="two dropfalse multi selectable">
        <li class="elem draggable" id="ex1">1</li>
        <li class="elem draggable" id="ex2">2</li>
        <li class="elem draggable" id="ex3">3</li>
        <li class="elem draggable" id="ex4">4</li>
        <li class="elem draggable" id="ex5">5</li>
      </ul>
    </div>
  </div>
</div>

---

This should be enough to get you started. If you want to handler scenarios such as reverting the psuedo sortables, this might help: Drag and drop multiple selected draggables and revert invalid ones using Jquery UI

Answer 2

//lets suppose we have 2 lists in 2 different divs.
//IMPORTAT: We must import the jQuery and AJAX first.
<div id="div1">
<ul class="list" id="list1">  //class must be given and same for both lists//
<li class="ui-state-default">Apple</li>
<li class="ui-state-default">Ball</li>
<li class="ui-state-default">Cat</li>
</ul>
</div>
<div id="div2">
<ul class="list" id="list2">  //class for both the lists is same but different id's/
<li class="ui-state-default">Duck</li>
<li class="ui-state-default">Elephant</li>
<li class="ui-state-default">Frog</li>
</ul>
</div>
//Ok so now we will make both the lists sortable first

<script>
$(function() {
   $("#list1").sortable({
    //using the sortable method we will sort the lists
      placeholder: "ui-state-highlight"});
   $("#list2").sortable({
      placeholder: "ui-state-highlight"});});
   $("#list1, #list2").sortable({
      connectWith:".list"    
       //connectWith method will allow you to sort all the lists of same class
            })
        });
    </script>