How can I reorder a list based on another active sortable list?

user_3110145 0
Viewed 86

I have list-1 and list-2 ul items.

If I sort/re-order list-1 item, same should be reflect in list-2 items

enter image description here

Fiddle

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

jquery-ui-sortable jquery-ui jquery
1 Answers

You can use .clone() method to clone your second ul element and then loop through first ul li tags get data-id and use them to append it inside second ul in same order.

Demo Code :

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

user_106064000
Related