基于jquery实现穿梭框效果

最新推荐文章于 2021-12-02 22:40:41 发布
最新推荐文章于 2021-12-02 22:40:41 发布
阅读量972 收藏 3
点赞数 2
分类专栏： # jquery项目实战：PC端 # jquery 文章标签： javascript
原文链接：https://blog.csdn.net/qq_42289686/article/details/93712081
版权 
<!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>
落花流雨
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery-实现穿梭框
LHH201016的博客
07-29 656
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do...
jQuery左右列表按钮控制穿梭框
11-17
jQuery左右列表按钮控制穿梭框
jquery实现穿梭框功能
01-15
利用jquery实现穿梭框功能，可点击实现内容左右穿梭。
jquery穿梭框
05-03
NULL 博文链接：https://wuzijingaip.iteye.com/blog/2430243
jQuery穿梭框
想搞全栈的前端
03-05 602
jQuer穿梭框 git仓库 // 初始化穿梭框 $("#shuttleBox").transferItem({ 'leftName':'左侧列表', 'rightName':'右侧列表', data:{ leftArr:[{id:'0',name:'1'},{id:'1',name:'哈哈哈哈'},{id:'3',name:'说没说过'},{id:'4',name:'我们沙发上'}], rightArr:[{id:'5',name:'沙发上的1'},{id:'6',na
jQuery实现穿梭框效果
qianzihao007
01-18 774
简介：今天给大家带来穿梭框的实现 一，布局的实现 <div id="box"> <div id="boxleft"> <ul id="left_ul"> </ul> </div> <div id="boxbtn"> <button id="btn_right">>>>><
jQuery双向选择穿梭框代码
07-24
这款基于jQuery和layui框架的穿梭框，通过JSON异步获取数据，提供了丰富的交互效果，提升了用户操作的直观性和效率。 首先，我们来了解一下jQuery。jQuery是一个轻量级的JavaScript库，简化了HTML文档遍历、事件...
jQuery双列表选框穿梭框
06-01
总结来说，"jQuery双列表选框穿梭框"是一种利用jQuery实现的交互组件，通过HTML、CSS和JavaScript三者结合，提供了一种方便用户在两个列表之间转移项目的工具。这种技术在许多Web应用中都有应用，例如在设置权限、...
js 穿梭框，可以从左边到右边，也可以从右到左，支持多选
07-21
穿梭框的实现通常基于HTML、CSS和JavaScript的组合。HTML提供结构，CSS负责样式，而JavaScript处理用户交互和逻辑。 在HTML部分，我们会有两个主要的列表元素，如`<ul>`或`<select>`，分别代表左右两个列表。每个...
jQuery实现穿梭框
weixin_38673922的博客
11-30 491
<style type="text/css"> #setList { margin:0 auto; display:flex; justify-content:space-around; align-items:center; } #setColumnNotShow, #setColumnShow { width:34%; height:300px; bord.
树形穿梭框
10-08
多种树形穿梭框集合 满足你对于所有树形穿梭框的需求 vue方式启动即可
树状图形式的穿梭框
07-11
树状图形式的穿梭框，希望对你们有帮助，主要是以JQ库为主
【精品源码】别在乱找了，JQuery穿梭框在这里
weixin_52578018的博客
12-02 421
一、项目教程 运行效果 教程 1、index.html <!doctype html> <html> <head> <title>穿梭框</title> <meta charset="utf-8"> <link rel="stylesheet" href="css/list-style.css"> <script src="js/jquery.min.js"></script> &lt
jQuery的穿梭框运用
m0_57202083的博客
08-31 840
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>穿梭框</title> <style> select{width:100px;height:150px} input[type=button]{width:50px} #opt{margin:90px 10px 0} .box{w.
穿梭框的树穿梭框 js_Axure入门案例系列 穿梭框案例
weixin_39714383的博客
01-12 331
穿梭框组件是前端框架中常见的一种数据选择方式，可以动态可视化的展示数据的归属。准备Axure 8(或Axure 9)软件已安装。掌握基本的软件使用。熟悉中继器。本教程知识点选项组：选中效果互斥。中继器函数。详细教程本教程源文件提供了通过全局变量传参和局部变量传参的两种方式实现。本文以局部变量传参进行实现(相对简单易懂，且方便后期成为组件复用)。功能可以选择待选区域数据添加至选中区域，同时...
jQuery实现简单穿梭框
qq_39085895的博客
04-02 2419
项目需要，做个简单的穿梭框****效果图如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>穿梭框</title> <link rel="stylesheet" href="index.css"> <script s...
用jquery实现了一个简易的穿梭框
aaqia的博客
07-29 140
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="js/jq...
jQuery穿梭框案例
nsnydnz的博客
08-09 350
文章目录jQuery穿梭框 jQuery穿梭框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值