将不同列表中的两个可排序对象按 class 移动到相同位置
Move two sortable objects in different list to the same position by their class
我有两个可排序对象列表
1 1 (1A 1B)
2 (2A 2B) 2
3 3 (3A 3B)
4 (4A 4B) 4
5 5 (5A 5B)
列表的代码如下所示:
$( function() {
$( ".contain" ).sortable();
});
.contain{
list-style: none;
}
#right{
float: left;
}
#left{
float: left;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<div>
<ul id="left" class="contain">
<li class="1">1</li>
<li class="2">2</li>
<ul>
<li>2A</li>
<li>2B</li>
</ul>
<li class="3">3</li>
<li class="4">4</li>
<ul>
<li>4A</li>
<li>4B</li>
</ul>
<li class="5">5</li>
</ul>
</div>
<div>
<ul id="right" class="contain">
<li class="1">1</li>
<ul>
<li>1A</li>
<li>1B</li>
</ul>
<li class="2">2</li>
<li class="3">3</li>
<ul>
<li>3A</li>
<li>3B</li>
</ul>
<li class="4">4</li>
<li class="5">5</li>
<ul>
<li>5A</li>
<li>5B</li>
</ul>
</ul>
</div>
</div>
我想对相同的数字进行排序。例如,如果我将列表 "left" 中的 5 移到顶部,那么列表 "right" 中的 5 也应该移到顶部,反之亦然,如果我将列表 "right" 中的 3 移至顶部,然后列表 "left" 中的 3 将执行相同的操作。
在您的代码中使用此 js 并尝试此答案
$(".contain").sortable({
start:function(event, ui){
pre = ui.item.index();
},
stop: function(event, ui) {
lst = $(this).attr('id');
post = ui.item.index();
other = (lst == 'left') ? 'right' : 'left';
if (post > pre) {
$('#'+other+ ' li.li_parent:eq(' +pre+ ')').insertAfter('#'+other+ ' li.li_parent:eq(' +post+ ')');
}else{
$('#'+other+ ' li.li_parent:eq(' +pre+ ')').insertBefore('#'+other+ ' li.li_parent:eq(' +post+ ')');
}
}
});
你的 ul 应该在 li 中,例如:- <li>1<ul><li>a</li></ul></li>
并为可移动的 li
分配 class 名称 li_parent
。
$(function() {
var lst, pre;
$(".contain").sortable({
start: function(event, ui) {
pre = ui.item.index();
},
stop: function(event, ui) {
lst = $(this).attr('id');
post = ui.item.index();
other = (lst == 'left') ? 'right' : 'left';
if (post > pre) {
$('#' + other + ' li.li_parent:eq(' + pre + ')').insertAfter('#' + other + ' li.li_parent:eq(' + post + ')');
} else {
$('#' + other + ' li.li_parent:eq(' + pre + ')').insertBefore('#' + other + ' li.li_parent:eq(' + post + ')');
}
}
});
});
.contain{
list-style: none;
}
#right{
float: left;
}
#left{
float: left;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<div>
<ul id="left" class="contain">
<li class="1 li_parent">1</li>
<li class="2 li_parent">2
<ul>
<li>2A</li>
<li>2B</li>
</ul>
</li>
<li class="3 li_parent">3</li>
<li class="4 li_parent">4
<ul>
<li>4A</li>
<li>4B</li>
</ul>
</li>
<li class="5 li_parent">5</li>
</ul>
</div>
<div>
<ul id="right" class="contain">
<li class="1 li_parent">1
<ul>
<li>1A</li>
<li>1B</li>
</ul>
</li>
<li class="2 li_parent">2</li>
<li class="3 li_parent">3
<ul>
<li>3A</li>
<li>3B</li>
</ul>
</li>
<li class="4 li_parent">4</li>
<li class="5 li_parent">5
<ul>
<li>5A</li>
<li>5B</li>
</ul>
</li>
</ul>
</div>
</div>
我有两个可排序对象列表
1 1 (1A 1B)
2 (2A 2B) 2
3 3 (3A 3B)
4 (4A 4B) 4
5 5 (5A 5B)
列表的代码如下所示:
$( function() {
$( ".contain" ).sortable();
});
.contain{
list-style: none;
}
#right{
float: left;
}
#left{
float: left;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<div>
<ul id="left" class="contain">
<li class="1">1</li>
<li class="2">2</li>
<ul>
<li>2A</li>
<li>2B</li>
</ul>
<li class="3">3</li>
<li class="4">4</li>
<ul>
<li>4A</li>
<li>4B</li>
</ul>
<li class="5">5</li>
</ul>
</div>
<div>
<ul id="right" class="contain">
<li class="1">1</li>
<ul>
<li>1A</li>
<li>1B</li>
</ul>
<li class="2">2</li>
<li class="3">3</li>
<ul>
<li>3A</li>
<li>3B</li>
</ul>
<li class="4">4</li>
<li class="5">5</li>
<ul>
<li>5A</li>
<li>5B</li>
</ul>
</ul>
</div>
</div>
我想对相同的数字进行排序。例如,如果我将列表 "left" 中的 5 移到顶部,那么列表 "right" 中的 5 也应该移到顶部,反之亦然,如果我将列表 "right" 中的 3 移至顶部,然后列表 "left" 中的 3 将执行相同的操作。
在您的代码中使用此 js 并尝试此答案
$(".contain").sortable({
start:function(event, ui){
pre = ui.item.index();
},
stop: function(event, ui) {
lst = $(this).attr('id');
post = ui.item.index();
other = (lst == 'left') ? 'right' : 'left';
if (post > pre) {
$('#'+other+ ' li.li_parent:eq(' +pre+ ')').insertAfter('#'+other+ ' li.li_parent:eq(' +post+ ')');
}else{
$('#'+other+ ' li.li_parent:eq(' +pre+ ')').insertBefore('#'+other+ ' li.li_parent:eq(' +post+ ')');
}
}
});
你的 ul 应该在 li 中,例如:- <li>1<ul><li>a</li></ul></li>
并为可移动的 li
分配 class 名称 li_parent
。
$(function() {
var lst, pre;
$(".contain").sortable({
start: function(event, ui) {
pre = ui.item.index();
},
stop: function(event, ui) {
lst = $(this).attr('id');
post = ui.item.index();
other = (lst == 'left') ? 'right' : 'left';
if (post > pre) {
$('#' + other + ' li.li_parent:eq(' + pre + ')').insertAfter('#' + other + ' li.li_parent:eq(' + post + ')');
} else {
$('#' + other + ' li.li_parent:eq(' + pre + ')').insertBefore('#' + other + ' li.li_parent:eq(' + post + ')');
}
}
});
});
.contain{
list-style: none;
}
#right{
float: left;
}
#left{
float: left;
}
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div>
<div>
<ul id="left" class="contain">
<li class="1 li_parent">1</li>
<li class="2 li_parent">2
<ul>
<li>2A</li>
<li>2B</li>
</ul>
</li>
<li class="3 li_parent">3</li>
<li class="4 li_parent">4
<ul>
<li>4A</li>
<li>4B</li>
</ul>
</li>
<li class="5 li_parent">5</li>
</ul>
</div>
<div>
<ul id="right" class="contain">
<li class="1 li_parent">1
<ul>
<li>1A</li>
<li>1B</li>
</ul>
</li>
<li class="2 li_parent">2</li>
<li class="3 li_parent">3
<ul>
<li>3A</li>
<li>3B</li>
</ul>
</li>
<li class="4 li_parent">4</li>
<li class="5 li_parent">5
<ul>
<li>5A</li>
<li>5B</li>
</ul>
</li>
</ul>
</div>
</div>