CSS部分
/*添加福利*/
.add-box,.remove-box{
background-color:#f1f1f1;
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
.add-span,.remove-span{
border:1px solid #aaa;
border-radius: 3px;
font-size: 0.7rem;
padding:0.2rem 0.4rem;
transition: 0.1s;
width: calc((100% / 4) - 0.6rem);
display:block;
float: left;
margin: 0.3rem;
background-color:white;
}
.add-span i,.remove-span i{
font-size: 0.7rem;
padding-right: 0.1rem;
padding-left: 0.2rem;
transition: 0.3s;
float: right;
}
.add-span i{
color: #007bff;
}
.remove-span i{
color: #dc3545;
}
.add-span:hover,.remove-span:hover{
background-color:#cce5ff;
border-color: #b8daff;
cursor: pointer;
}
.add-span:active{
background-color:#007bff;
border-color: #007bff;
cursor: pointer;
color: white;
}
.remove-span:active{
background-color:#dc3545;
border-color: #dc3545;
cursor: pointer;
color: white;
}
.add-span:active i,.remove-span:active i{
cursor: pointer;
color: white;
}
HTML部分
<div class="row" style="margin: 0;">
<div class="col-sm-12 col-md-6">
<div class="remove-box">
<span class="remove-span">添加福利<i class="icon-icon_roundclose iconfont"></i></span>
<div class="clearfix"></div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="add-box">
<span index="2014" class="add-span" onclick="addSpan(this)">五险一金<i class="icon-icon_im_more iconfont"></i></span>
<span index="2015" class="add-span" onclick="addSpan(this)">周末双休<i class="icon-icon_im_more iconfont"></i></span>
<span index="2016" class="add-span" onclick="addSpan(this)">包食宿<i class="icon-icon_im_more iconfont"></i></span>
<span index="2017" class="add-span" onclick="addSpan(this)">通讯补贴<i class="icon-icon_im_more iconfont"></i></span>
<span index="2018" class="add-span" onclick="addSpan(this)">年底双薪<i class="icon-icon_im_more iconfont"></i></span>
<span index="2019" class="add-span" onclick="addSpan(this)">餐宿补贴<i class="icon-icon_im_more iconfont"></i></span>
<span index="2020" class="add-span" onclick="addSpan(this)">年底旅游<i class="icon-icon_im_more iconfont"></i></span>
<span index="2021" class="add-span" onclick="addSpan(this)">年终分红<i class="icon-icon_im_more iconfont"></i></span>
<span index="2022" class="add-span" onclick="addSpan(this)">加班补助<i class="icon-icon_im_more iconfont"></i></span>
<span index="2023" class="add-span" onclick="addSpan(this)">带薪年假<i class="icon-icon_im_more iconfont"></i></span>
<span index="2024" class="add-span" onclick="addSpan(this)">股票期权<i class="icon-icon_im_more iconfont"></i></span>
<span index="2025" class="add-span" onclick="addSpan(this)">交通补贴<i class="icon-icon_im_more iconfont"></i></span>
<span index="2026" class="add-span" onclick="addSpan(this)">高温补贴<i class="icon-icon_im_more iconfont"></i></span>
<span index="2027" class="add-span" onclick="addSpan(this)">弹性工作<i class="icon-icon_im_more iconfont"></i></span>
<span index="2028" class="add-span" onclick="addSpan(this)">采暖补贴<i class="icon-icon_im_more iconfont"></i></span>
<span index="2029" class="add-span" onclick="addSpan(this)">医疗保险<i class="icon-icon_im_more iconfont"></i></span>
<span index="2030" class="add-span" onclick="addSpan(this)">定期体检<i class="icon-icon_im_more iconfont"></i></span>
<span index="2031" class="add-span" onclick="addSpan(this)">免费班车<i class="icon-icon_im_more iconfont"></i></span>
<div class="clearfix"></div>
</div>
</div>
</div>
JS部分
// 待添加的数据数组
let addlist =[];
// 用于提交给后台的数组
let sublist =[];
// 初始化待添加的数据数组
/*
这里span的index 你可以换成自己定义的值,
*/
$("document").ready(function(){
for (var i = 0; i < $(".add-box .add-span").length; i++) {
addlist.push($(".add-box .add-span").eq(i).attr("index"))
}
})
/*
穿梭框待添加的部分,这里是添加span到左边
*/
function addSpan(data){
console.log($(data).index());
var index = $(data).index();
var text = $(".add-box .add-span").eq(index).text();
var spanIndex = $(".add-box .add-span").eq(index).attr("index");
var html = `<span class="remove-span" onclick="removeSpan(this)" index="`+spanIndex+`">`+text+`<i class="icon-icon_roundclose iconfont"></i></span>`;
$(".add-box .add-span").eq(index).remove();
addlist.splice(addlist.indexOf(spanIndex),1);
$(".remove-box").prepend(html);
sublist.push(spanIndex);
console.log(addlist)
}
/*
穿梭框已经添加的部分,这里是移除已添加的span
*/
function removeSpan(data){
console.log($(data).index());
var index = $(data).index();
var text = $(".remove-box .remove-span").eq(index).text();
var spanIndex = $(".remove-box .remove-span").eq(index).attr("index");
var html = `<span class="add-span" onclick="addSpan(this)" index="`+spanIndex+`">`+text+`<i class="icon-icon_im_more iconfont"></i></span>`;
$(".remove-box .remove-span").eq(index).remove();
$(".add-box").prepend(html);
addlist.push(spanIndex);
sublist.splice(sublist.indexOf(spanIndex),1);
console.log(sublist)
}