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

时间:2014-11-30 23:07:46

标签: jquery jquery-ui jquery-ui-sortable

我有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

2 个答案:

答案 0 :(得分:0)

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

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

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

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


&#13;
&#13;
$(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();
});
&#13;
* {
  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;
}
&#13;
<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>
&#13;
&#13;
&#13;


这应该足以让你入门。如果您想处理诸如还原 psuedo sortables之类的方案,这可能会有所帮助:Drag and drop multiple selected draggables and revert invalid ones using Jquery UI

答案 1 :(得分:0)

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