手写穿梭框

最新推荐文章于 2023-12-29 10:22:38 发布

smiling tiger

最新推荐文章于 2023-12-29 10:22:38 发布

阅读量795

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 html5 css

本文链接：https://blog.csdn.net/weixin_45567213/article/details/122844918

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

成品展示（css只写了一点点）程序和程序员有一个能跑就行

html部分

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="warp">
        <ul id="left">
            <div id="left-head">
                <input type="checkbox"  id="checkallleft">全选
                <span id="leftnum">选中个数0</span>
            </div>
            <div id="leftlist">

                <li>
                    <input type="checkbox" id="check1">
                    <p>列表1</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表2</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1" >
                    <p>列表3</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表4</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表5</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表6</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表7</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表8</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表9</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表10</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表11</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表12</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表13</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表14</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表15</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1"> 
                    <p>列表16</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表17</p> 
                </li>
                <li>
                    <input type="checkbox" id="check1">
                    <p>列表18</p> 
                </li>
                  
                <li>
                    <input type="checkbox" id="check3" disabled="disabled">
                    <p>禁用1</p> 
                </li>
            </div>
        </ul>
        <div id="center">
            <span id="centerL">></span>
            <span id="centerR"><</span>
        </div>
        <ul id="right">
            <div id="right-head">
                <input type="checkbox"  id="checkallright">全选
                <span id="rightnum">选中个数0</span>
            </div>
            <div id="rightlist">
                <li>
                    <input type="checkbox" id="check3" disabled="disabled">
                    <p>禁用2</p> 
                </li>
            </div>
        </ul>
    </div>
 <script src="./index2.js"></script>
</body>
</html>

一点点css

*{
    margin: 0;
    padding: 0;
    list-style: none;
}
#warp{
    width: 600px;
    height: 600px;
    display: flex;
}
#left,#right,#center{
    text-align: center  ;
    width: 200px;
    height: 600px;
    border: solid 1px #ccc;
}
#left-head,#right-head{
    width: 200px;
    height: 30px;
    line-height: 30px;
    background-color: aqua;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-around;
}
#left li,#right li{
    width: 180px;
    height: 30px;
    margin-top: 5px;
    background-color: aquamarine;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
  
}
#center span{
    font-size: 24px;
    background-color: antiquewhite;
    line-height: 600px;
}
#leftlist,#rightlist{
    height: 570px;
    overflow-y: scroll
}

js部分

/***
 * 
 * data:2022年02月09日
 * name：@是前端小白？ || 蓝藻门
 * 
 * ***/
checkallleft.addEventListener("click",()=>{
    chekes=document.querySelectorAll("#leftlist>li>#check1")
    // 主动全选
    chekesAll(chekes)  
})
// 单选框勾选事件
var chekeListL=document.querySelectorAll("#check1")
for (let i = 0; i < chekeListL.length; i++) {
   chekeListL[i].addEventListener("change",()=>{
    var nums=document.querySelectorAll("#check1:checked") 
    num1(nums)  
    //勾选高亮 
    fun(nums,centerL)
    checkChange(nums)
    // 获取数据
    var arrLeft=checkValues(nums)
    // 被动全选
    var checks1=document.querySelectorAll("#check1")
    selfchekesAll(nums,checks1,checkallleft)
   }) 
}
centerL.addEventListener("click",()=>{
    var list1=document.querySelectorAll("#check1:checked")
    show(list1,rightlist)
    checkallleft.checked=false
    leftnum.innerHTML=`选中个数0`
    centerL.style. backgroundColor="antiquewhite"
})
checkallright.addEventListener("click",()=>{
    chekes=document.querySelectorAll("#check2")
    // 主动全选
    chekesAll2(chekes)  
})
 centerR.addEventListener("click",()=>{
    var list1=document.querySelectorAll("#check2:checked")
    show2(list1,leftlist)
    checkallright.checked=false
    rightnum.innerHTML=`选中个数0`
    centerR.style. backgroundColor="antiquewhite"
})



// 工具函数
// 状态守卫
var falg1=1
// 主动全选
let chekesAll=function(_chekes){
    if (falg1!=0) {
        for (let i = 0; i < _chekes.length; i++) {
            _chekes[i].checked=true; 
            falg1=0
            num1(_chekes)
                _chekes[i].parentNode.style. backgroundColor="#acfae0"
                centerL.style. backgroundColor="#f2d6b0"
            }
        }else{
            for (let i = 0; i < _chekes.length; i++) {
                _chekes[i].checked=false; 
                falg1=1
                leftnum.innerHTML=`选中个数0`
                _chekes[i].parentNode.style. backgroundColor="aquamarine"
                centerL.style. backgroundColor="antiquewhite"
            }   
        }
      
}
var falg2=1
let chekesAll2=function(_chekes){
    if (falg2!=0) {
        for (let i = 0; i < _chekes.length; i++) {
            _chekes[i].checked=true; 
            falg2=0
            num2(_chekes)
            _chekes[i].parentNode.style. backgroundColor="#acfae0"
            centerR.style. backgroundColor="#f2d6b0"
            }
        }else{
            for (let i = 0; i < _chekes.length; i++) {
                _chekes[i].checked=false; 
                falg2=1
                rightnum.innerHTML=`选中个数0`
                _chekes[i].parentNode.style. backgroundColor="aquamarine"
                centerR.style. backgroundColor="antiquewhite"
            }   
        }
      
}
// 计数器
const num1=function(_chekes){
    leftnum.innerHTML=`选中个数${_chekes.length}`
}
const num2=function(_chekes){
    rightnum.innerHTML=`选中个数${_chekes.length}`
}
// 勾选高亮
const checkChange=function(_nums){
    var nums=document.querySelectorAll("#check1") 
    if (!_nums.length<=0) {
        for (let i = 0; i < nums.length; i++) {
            nums=document.querySelectorAll("#check1:checked")
            console.log(nums);
            nums[i].parentNode.style. backgroundColor="aquamarine"
        }
    }else{
        for (let i = 0;  i<_nums.length; i++) {
           _nums[i].parentNode.style. backgroundColor="#acfae0"
        }
    }
}
const checkChanges=function(_nums){
    if (!_nums.length<=0) {
        var nums=document.querySelectorAll("#check2") 
        for (let i = 0; i < nums.length; i++) {
            nums=document.querySelectorAll("#check2:checked")
            nums[i].parentNode.style. backgroundColor="aquamarine"
        }
    }else{
        for (let i = 0;  i<_nums.length; i++) {
           _nums[i].parentNode.style. backgroundColor="#acfae0"
        }
    }
}
var arrLeft=[]
// 获取数据
const checkValues=function(_nums){  
    for (let i = 0; i < _nums.length; i++) {
        arrLeft.push(_nums[i].nextElementSibling.innerHTML)
    }
    return arrLeft
}
// 被动全选  勾选   所以单选框  改变那个单选框
const selfchekesAll=function(_nums,_checks,_str){
  if (_nums.length==_checks.length) {
      _str.checked=true
      falg1=0
      checkChange(_nums)
  }else{
    _str.checked=false
    falg1=1
  }
}
// 渲染页面  数据  在哪里添加节点
var arr= []
const show=function(_arr,_str){
    // 获取数据
    for (let i = 0; i < _arr.length; i++) {

       arr.push( _arr[i].nextElementSibling.innerHTML)
    }
    arr=arr.sort()
    // 删除节点
    for (let j = 0; j < _arr.length; j++) {
      _arr[j].parentNode.remove()
    }
    // 创建节点
    
    var tt=_str.querySelectorAll("#check2")
    for (let o = 0; o < tt.length; o++) {
    tt[o].parentNode.remove()
    }
    console.log(arr);
    for (let k = 0; k < arr.length; k++) {
        let li=document.createElement('li')
        li.innerHTML=` 
        <input type="checkbox" id="check2">
        <p>${arr[k]}</p> 
       `
       _str.appendChild (li)
   }
   arr=[]
  
   myfun()
}
var arr1=[]
const show2=function(_arr,_str){
    // 获取数据
    for (let i = 0; i < _arr.length; i++) {
       arr1.push( _arr[i].nextElementSibling.innerHTML)
    }
   
    // 删除节点
    for (let j = 0; j < _arr.length; j++) {
      _arr[j].parentNode.remove()
    }
    // 创建节点
    var vv=document.querySelectorAll("#check1")
    var bb=[]
    for (let index = 0; index < vv.length; index++) {
        bb.push(vv[index].nextElementSibling.innerHTML)
       
    }
    for (let rr = 0; rr < vv.length; rr++) {
        vv[rr].parentNode.remove()
    }
    arr1=arr1.concat(bb)
    arr1=arr1.sort()
    for (let k = 0; k < arr1.length; k++) {
        let li=document.createElement('li')
        li.innerHTML=` 
        <input type="checkbox" id="check1">
        <p>${arr1[k]}</p> 
       `
       _str.appendChild (li)
   }

   myfun()
}
// 右边渲染页面
const myfun=function(){
    var chekeListR=document.querySelectorAll("#check2")
    for (let i = 0; i < chekeListR.length; i++) {
        chekeListR[i].addEventListener("change",()=>{
         var nums=document.querySelectorAll("#check2:checked") 
         num2(nums)  
         //勾选高亮 
         fun(nums,centerR)
         checkChanges(nums)
         // 获取数据
         var arrLeft=checkValues(nums)
         // 被动全选
         var checks1=document.querySelectorAll("#check2")
         selfchekesAll(nums,checks1,checkallright)
        }) 
     }
}
// 勾选 穿梭案例高亮
const fun=function(_arr,_str){
    if (_arr.length>0) {
        _str.style. backgroundColor="#f2d6b0"
    }else{
        _str.style. backgroundColor="antiquewhite"
    }
}

写的很喽，大佬们见笑了

运用知识点：创建节点、添加节点、删除节点、获取父级节点、获取下一个兄弟节点、状态守卫、以及array的一些api