基于jquery实现穿梭框效果

it2023-02-21 84

<!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"> 五险一金 周末双休 包食宿 通讯补贴 年底双薪 餐宿补贴 年底旅游 年终分红 加班补助 带薪年假 股票期权 交通补贴 高温补贴 弹性工作 采暖补贴 医疗保险 定期体检 免费班车 </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 = `` + text + ``; // 右边内容：移除-选中的元素 $(".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 = `` + text + ``; // 左边内容：移除-选中的元素 $(".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>

最新回复(0)