如何根据另一个活动的可排序列表对列表进行重新排序？

debugcn 发表于 Dev

雷迪

我有list-1和list-2 ul项目。

如果我对list-1项目进行排序/重新排序，则应该在list-2项目中进行反映

$( function() {
    $( "#sortable" ).sortable({
        revert: true
    });
    $( "ul, li" ).disableSelection();
} );

body{font-family:verdana;font-size:14px;}
ul{margin:5px 0 20px 0;padding:0;list-style:none;}
li{padding:2px;width:150px;margin-bottom:5px;}
ul.list-1 li{background-color:#76c2ff;color:#ffffff;border:1px solid #008dff;}
ul.list-2 li{background-color:#fefefe;border:1px solid #ccc;text-align:right;}
h4{margin:0;padding:0;}
.sort-container{width:200px;float:left;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="sort-container">
    <h4>Sort / Reorder this list</h4>
    <ul id="sortable" class="list-1">
        <li>Sort 01</li>
        <li>Sort 02</li>
        <li>Sort 03</li>
        <li>Sort 04</li>
        <li>Sort 05</li>
    </ul>
</div>

<div class="sort-container">
    <h4>Should re-order</h4>
    <ul class="list-2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

斯瓦蒂

您可以使用.clone()method克隆第二个ul元素，然后遍历第一个ul li标记getdata-id并使用它们以相同顺序将其附加到第二个ul内。

演示代码：

$(function() {
  $("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
      //cloned ul
      var cloned = $('ul.list-2').clone()
      $('ul.list-2').html("") //empty it
      $('.list-1 li').each(function() {
        var data_id = $(this).data('id') //get data-id
        //find item inside li tag and change position
        $(cloned).find("li[data-two=" + data_id + "]").clone().appendTo($('ul.list-2'))
      });
    }
  });
  $("ul, li").disableSelection();
});

body {
  font-family: verdana;
  font-size: 14px;
}

ul {
  margin: 5px 0 20px 0;
  padding: 0;
  list-style: none;
}

li {
  padding: 2px;
  width: 150px;
  margin-bottom: 5px;
}

ul.list-1 li {
  background-color: #76c2ff;
  color: #ffffff;
  border: 1px solid #008dff;
}

ul.list-2 li {
  background-color: #fefefe;
  border: 1px solid #ccc;
  text-align: right;
}

h4 {
  margin: 0;
  padding: 0;
}

.sort-container {
  width: 200px;
  float: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="sort-container">
  <h4>Sort / Reorder this list</h4>
  <ul id="sortable" class="list-1">
  <!--aded data-attr just to know sequence-->
    <li data-id="1">Sort 01</li>
    <li data-id="2">Sort 02</li>
    <li data-id="3">Sort 03</li>
    <li data-id="4">Sort 04</li>
    <li data-id="5">Sort 05</li>
  </ul>
</div>

<div class="sort-container">
  <h4>Should re-order</h4>
  <ul class="list-2">
    <li data-two="1">1</li>
    <li data-two="2">2</li>
    <li data-two="3">3</li>
    <li data-two="4">4</li>
    <li data-two="5">5</li>
  </ul>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。