<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/transform.css">
<script src="../js/jquery-3.5.1.min.js"></script>
<style>
.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;
}
</style>
</head>
<body>
<div class="row" style="margin: 0;">
<div class="col-sm-12 col-md-6">
<div class="remove-box">
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="add-box">
<span index="2014" class="add-span">五险一金<i class="icon-icon_im_more iconfont"></i></span>
<span index="2015" class="add-span">周末双休<i class="icon-icon_im_more iconfont"></i></span>
<span index="2016" class="add-span">包食宿<i class="icon-icon_im_more iconfont"></i></span>
<span index="2017" class="add-span">通讯补贴<i class="icon-icon_im_more iconfont"></i></span>
<span index="2018" class="add-span">年底双薪<i class="icon-icon_im_more iconfont"></i></span>
<span index="2019" class="add-span">餐宿补贴<i class="icon-icon_im_more iconfont"></i></span>
<span index="2020" class="add-span">年底旅游<i class="icon-icon_im_more iconfont"></i></span>
<span index="2021" class="add-span">年终分红<i class="icon-icon_im_more iconfont"></i></span>
<span index="2022" class="add-span">加班补助<i class="icon-icon_im_more iconfont"></i></span>
<span index="2023" class="add-span">带薪年假<i class="icon-icon_im_more iconfont"></i></span>
<span index="2024" class="add-span">股票期权<i class="icon-icon_im_more iconfont"></i></span>
<span index="2025" class="add-span">交通补贴<i class="icon-icon_im_more iconfont"></i></span>
<span index="2026" class="add-span">高温补贴<i class="icon-icon_im_more iconfont"></i></span>
<span index="2027" class="add-span">弹性工作<i class="icon-icon_im_more iconfont"></i></span>
<span index="2028" class="add-span">采暖补贴<i class="icon-icon_im_more iconfont"></i></span>
<span index="2029" class="add-span">医疗保险<i class="icon-icon_im_more iconfont"></i></span>
<span index="2030" class="add-span">定期体检<i class="icon-icon_im_more iconfont"></i></span>
<span index="2031" class="add-span">免费班车<i class="icon-icon_im_more iconfont"></i></span>
</div>
</div>
</div>
<script>
let addlist = []; // 待添加的数据数组
let sublist = []; // 用于提交给后台的数组
// 初始化待添加的数据数组
$("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的index 你可以换成自己定义的值
}
})
/*
添加到左边 -- 向左边穿梭
attr 设置或返回被选元素的属性值
利用事件冒泡:给元素添加点击事件
*/
var ul = document.querySelector('.add-box');
ul.addEventListener('click', function (e) {
addSpan(e.target)
});
function addSpan(data) {
// 获取索引
var index = $(data).index();
// 根据索引找到点击的元素,获取点击元素的内容
var text = $(".add-box .add-span").eq(index).text();
// 获取自定义属性index
var spanIndex = $(".add-box .add-span").eq(index).attr("index");
// 创建html元素
var html = `<span class="remove-span" οnclick="removeSpan(this)" index="` + spanIndex + `">` + text + `<i class="icon-icon_roundclose iconfont"></i></span>`;
// 右边内容:移除-选中的元素
$(".add-box .add-span").eq(index).remove();
// 左边内容:添加-选中的元素
$(".remove-box").prepend(html);
/*
采集添加的数据
*/
addlist.splice(addlist.indexOf(spanIndex), 1);
sublist.push(spanIndex);
console.log('addlist1', addlist);
console.log('sublist1', sublist); // 添加动作:用于提交给后台的数组
}
/*
移除已添加的span -- 向右边穿梭
*/
function removeSpan(data) {
// 获取索引
var index = $(data).index();
// 根据索引找到点击的元素,获取点击元素的内容
var text = $(".remove-box .remove-span").eq(index).text();
// 获取自定义属性index
var spanIndex = $(".remove-box .remove-span").eq(index).attr("index");
// 创建html元素
var html = `<span class="add-span" οnclick="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('addlist2', addlist);
console.log('sublist2', sublist); // 删除动作:用于提交给后台的数组
}
</script>
</body>
</html>
基于jquery实现穿梭框效果
最新推荐文章于 2021-12-02 22:40:41 发布