如何根据另一个活动的可排序列表对列表重新排序?
How can I reorder a list based on another active sortable list?
我有 list-1 和 list-2 ul 项。
如果我sort/re-order list-1 item,同样应该反映在list-2 items
$( 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()
方法克隆您的第二个 ul
元素,然后循环遍历第一个 ul li 标签获取 data-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>
我有 list-1 和 list-2 ul 项。
如果我sort/re-order list-1 item,同样应该反映在list-2 items
$( 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()
方法克隆您的第二个 ul
元素,然后循环遍历第一个 ul li 标签获取 data-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>