js穿梭框 实现_JS 原生穿梭框代码

左右穿梭

!DOCTYPE html>

#box {

width: 600px;

margin: auto;

}

#box2 {

display: flex;

padding: 10px;

}

#box2>div {

height: 300px;

width: 200px;

}

#box3,

#box5 {

border: 1px solid red;

}

#box4 {

text-align: center;

}

ol>li {

cursor: pointer;

width: 80%;

}

ol>li:hover {

background-color: #f90;

}

.active {

background-color: #ddd;

}

模块名称:

添加

未选模块

全部添加>>

添加>>

<<删除

<<全部删除

已选模块

//获取到频道名称模块

var moduleName = document.getElementById("moduleName");

// 获取到添加按钮

var addModule = document.getElementById("addModule");

// 获取到左方盒子

var box6 = document.getElementById("box6");

// 获取到右方盒子

var box7 = document.getElementById("box7");

// 获取到全部添加按钮

var addAll = document.getElementById("addAll");

// 获取到添加到右边按钮

var add = document.getElementById("add");

// 获取到删除到左边按钮

var del = document.getElementById("del");

// 获取到删除全部按钮

var delAll = document.getElementById("delAll");

var tempArr1 = [];

var tempArr2 = [];

if (localStorage.obj1220) {

var obj = JSON.parse(localStorage.obj1220);

var left = obj.left;

var right = obj.right;

showDom(left, box6);

showDom(right, box7);

} else {

var obj = {

left: [],

right: []

}

localStorage.obj1220 = JSON.stringify(obj);

}

//console.log("localStorage:",localStorage.obj1220);

addModule.onclick = function () {

var mName = moduleName.value;

if (mName) {

var obj = JSON.parse(localStorage.obj1220);

obj.left.push(mName);

console.log("obj:", obj);

localStorage.obj1220 =