如何在 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

//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>

Answer 2

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

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

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

现在，当第一个 <ul> 的项目被拖动时，我们找到其他 克隆，像 jQuery UI 一样定位它们absolute，然后设置它们的位置属性（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 可排序的场景，这可能会有所帮助：Drag and drop multiple selected draggables and revert invalid ones using Jquery UI