如何在JQuery UI中对不同列表中的多个项进行排序？

Question

我有4个清单。我从中获取项目的下方列表，如果我将项目放在第一个列表中，它将在下面的两个列表中生成克隆。

我需要能力只需要在顶线获取元素，它也需要克隆，我可以向左或向右移动，就像多重排序一样。

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

  }); 

帮我。 http://jsfiddle.net/gr5w07ax/

IMG示例：http://i57.tinypic.com/205p64l.png

Answer 1

首先，你不应该简单地追加具有id属性的元素的克隆，这将导致多个元素具有相同的id无效。

因此，我们可以在克隆时删除id并使用data-*属性来分组相似的元素：

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

现在，当拖动第一个<ul>的项目时，我们找到其他克隆，像jQuery UI一样将它们定位为绝对，然后将它们的位置属性（top，left等）设置为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))
}

为此，我们应该将父<ul>设置为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>

---

这应该足以让你入门。如果你想处理诸如恢复psuedo sortables之类的场景，这可能会有所帮助：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>