如何使用 jquery 实现单击两个列表中任意一个列表中的项目会将所选项目移动到另一个列表中。
将项目移动到另一个列表时，新的排序应首先基于项目编号(数据值)进行数字排序，然后是左侧项目，然后是右侧项目。
例如，如果您要单击“左侧项目 2”，则该项目应从左侧列表中删除，右侧列表应显示右侧项目 1、左侧项目 2、右侧项目 2、右侧项目 3、正确的项目 4，正确的项目 5
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-left">
<li data-value="1">Left Item 1</li>
<li data-value="2">Left Item 2</li>
<li data-value="3">Left Item 3</li>
<li data-value="4">Left Item 4</li>
<li data-value="5">Left Item 5</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-right">
<li data-value="1">Right Item 1</li>
<li data-value="2">Right Item 2</li>
<li data-value="3">Right Item 3</li>
<li data-value="4">Right Item 4</li>
<li data-value="5">Right Item 5</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>最佳答案
这是一个好的开始......
您可以了解如何创建监听器事件和 jQuery 选择器。
您还可以添加逻辑来操作 html 元素并对它们进行排序。
$('ul.my-list-left ').on('click','li',function () {
var total = $('ul.my-list-right li').length;
if(total ===0){
$('ul.my-list-right').append($('ul.my-list-left li').eq($(this).index()))
}else{
var data_value = parseInt($(this).attr('data-value'));
var position = total<data_value?total-1:data_value-1;
$('ul.my-list-right li').eq(position).after($('ul.my-list-left li').eq( $(this).index()))
}
});
$('ul.my-list-right ').on('click','li',function () {
var total = $('ul.my-list-left li').length;
if(total ===0){
$('ul.my-list-left').append($('ul.my-list-right li').eq($(this).index()))
}else{
var data_value = parseInt($(this).attr('data-value'));
var position = total<data_value?total-1:data_value-1;
$('ul.my-list-left li').eq(position).after($('ul.my-list-right li').eq( $(this).index()))
}
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-left">
<li data-value="1">Left Item 1</li>
<li data-value="2">Left Item 2</li>
<li data-value="3">Left Item 3</li>
<li data-value="4">Left Item 4</li>
<li data-value="5">Left Item 5</li>
</ul>
</div>
</div>
<div class="col-sm-4 col-sm-offset-1 col-xs-6">
<div class="well">
<ul class="my-list my-list-right">
<li data-value="1">Right Item 1</li>
<li data-value="2">Right Item 2</li>
<li data-value="3">Right Item 3</li>
<li data-value="4">Right Item 4</li>
<li data-value="5">Right Item 5</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>关于javascript - Jquery插入具有可排序位置的列表元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33017967/