JAVAScript--左右穿梭框

最新推荐文章于 2024-06-06 17:07:18 发布

公诚士

最新推荐文章于 2024-06-06 17:07:18 发布

阅读量330

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47200160/article/details/118053476

版权

<!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>左--右穿梭框</title>
    <style>
    .box>.left,.box>.right{
        min-width: 300px;
        min-height: 400px;
        border: 1px solid black;
        margin: 10px;
    }
    #one>div,#two>div{
        background: #fff;
        height:25px;
    }
/* 鼠标滑过 */
    #one>div:hover,#two>div:hover{
        background: #ff9900;
    }
    .box{
        display: flex;
    }
    .btn{
        padding-top: 100px;
    }
    .btn>button{
        margin-top: 10px;
    }
    .box>.btn{
       display: flex;
       flex-direction: column;

    }
    </style>
</head>
<body>
    <div>
        <label>模块名称:</label>
        <input type="text" id="name">
        <button id="add"> 添加</button>

    </div>
    <div class="box">
        <div class="left">
            <h1>未选模块</h1>
            <div id="one">
                <div>111</div>
                <div>111</div>
                <div>111</div>
            </div>
            
        </div>
        <div class="btn">
            <button id="alladd">全部添加&gt;&gt;</button>
            <button id="right">添加&gt;&gt;</button>
            <button id="left">&lt;&lt;删除</button>
            <button id="alldel">&lt;&lt;全部删除</button>
        </div>
        <div class="right">
            <h1>我的模块</h1>
            <div id="two">
                <div>哈哈哈</div>
                <div>哈哈哈</div>
                <div>搜索</div>
            </div>
        </div>
    </div>

    <script>

//数据模拟
/* var arr=[
  {"id":11,"name":"1111","check":false},  
  {"id":22,"name":"2222","check":false},  
  {"id":33,"name":"3333","check":true},  
  {"id":44,"name":"4444","check":true},  
  {"id":55,"name":"5555","check":false},  

]; */
var arr=localStorage.getItem("p2KaoShi")?JSON.parse(localStorage.getItem("p2KaoShi")  ).info :[]
//渲染数据
//获取渲染到左边的大盒子,通过id
 var oneDom=document.getElementById("one");
 //获取渲染到右边的大盒子,通过id
 var twoDom=document.getElementById("two");
 //把可点击自由移动的小盒子,渲染到页面,
 //循环数据arr,判断check值为true则渲染到左边,check值为false则渲染到右边,
 function show(res){
     var leftstr="";
     var rightstr="";
     for(var i=0;i<res.length;i++){
        if(res[i].check==false){
            leftstr+=`
            <div onclick="toleft(${res[i].id})">${res[i].name}</div>
            `
        }else{
            rightstr+=`
            <div onclick="toright(${res[i].id})">${res[i].name}</div>
            `
        }
     }
     //把字符串leftstr写入id为one的盒子
     oneDom.innerHTML=leftstr;
       //把字符串leftstr写入id为one的盒子
     twoDom.innerHTML=rightstr;
 }
 //页面加载完毕调用渲染show
 window.onload=function(){
    localStorage.setItem("p2KaoShi",JSON.stringify({"info":arr}));
     show(arr);
 }
 //点击左边的数据的小盒子,通过findIndex找到下标index
function toleft(id){
    var index=arr.findIndex(function(v){
           return v.id==id;
    })
     //点击他之后取反,即他会到另一个盒子
    arr[index].check=!arr[index].check;
    //console.log('index :>> ', index);
    //console.log('arr[index] :>> ', arr[index]);
    var e=event||window.event;
    //判断,在左边的盒子里,如果点击的对象的check值为true,然后变背景颜色为红色
    //如果对象的check值为false,则背景颜色为空
    if(arr[index].check === true){
        //console.log(arr[index].check);
            e.target.style.background="red";
            //console.log(e.target);
    }else{
        e.target.style.background="";
    }
}
 //点击右边的数据的小盒子,通过findIndex找到下标index
function toright(id){
    var index=arr.findIndex(function(v){
           return v.id==id;
    })
 //点击他之后取反,即他会到另一个盒子,不会立即执行,调用函数才执行
    arr[index].check=!arr[index].check;
    var e=event||window.event;
 //判断,在右边的盒子里,如果点击的对象的check值为false,然后变背景颜色为红色
//如果对象的check值为true,则背景颜色为空
    if(arr[index].check==false){
        e.target.style.background="red";
    }else{
        e.target.style.background="";
    }
}
//点击<<向右添加>>按钮,调用渲染函数
var rightDom=document.getElementById("right");
rightDom.onclick=function(){
    localStorage.setItem("p2KaoShi",JSON.stringify({"info":arr}));
    show(arr);
}
//点击<<向左删除>>按钮,调用渲染函数
var leftDom=document.getElementById("left");
leftDom.onclick=function(){
    localStorage.setItem("p2KaoShi",JSON.stringify({"info":arr}));
    show(arr);
}
//点击<<全部添加>>按钮,调用渲染函数
var alladdDom=document.getElementById("alladd");
alladdDom.onclick=function(){
     //循环数组arr,给每个arr元素的check赋值false,则改变所在框的位置   
    for(var i=0;i<arr.length;i++){
          arr[i].check=true;
    }
    localStorage.setItem("p2KaoShi",JSON.stringify({"info":arr}));
    show(arr);
}
//点击<<全部删除>>按钮,调用渲染函数
var alldelDom=document.getElementById("alldel");
alldelDom.onclick=function(){
    //循环数组arr,给每个arr元素的check赋值true,则改变所在框的位置
    for(var i=0;i<arr.length;i++){
          arr[i].check=false;
    }
    localStorage.setItem("p2KaoShi",JSON.stringify({"info":arr}));
    show(arr);
}
//最上面添加数据
var addDom=document.getElementById("add");
addDom.onclick=function(){
    var nameDom=document.getElementById("name");
    var name=nameDom.value;
    arr.push({"id":new Date().getTime(),"name":name,"check":false});
    localStorage.setItem("p2KaoShi",JSON.stringify({"info":arr}));
    show(arr);
}
  </script>
</body>
</html>

公诚士

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JAVAScript--左右穿梭框

<!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>左-.
复制链接

扫一扫