如何自己动手写一个穿梭框

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)
}