左右穿梭
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#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;
}
</style>
</head>
<body>
<div id="box">
<div id="entry">
<label>
模块名称:<input type="text" id="moduleName" />
</label>
<button type="button" id="addModule">添加</button>
</div>
<div id="box2">
<div id="box3">
<h2>未选模块</h2>
<ol id="box6"></ol>
</div>
<div id="box4">
<button type="button" id="addAll">全部添加>></button><br /><br />
<button type="button" id="add">添加>></button><br /><br />
<button type="button" id="del"><<删除</button><br /><br />
<button type="button" id="delAll"><<全部删除</button>
</div>
<div id="box5">
<h2>已选模块</h2>
<ol id="box7"></ol>
</div>
</div>
</div>
<script>
//获取到频道名称模块
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 = JSON.stringify(obj);
var left = obj.left;
var right = obj.right;
showDom(left, box6);
showDom(right, box7);
moduleName.value = "";
} else {
alert("模块名称不能为空");
}
}
addAll.onclick = function () {
all(1);
}
delAll.onclick = function () {
all(vv0);
}
box6.onclick = function (event) {
var e = event || window.event;
upd(1, e);
}
add.onclick = function () {
if (tempArr1.length > 0) {
var obj = JSON.parse(localStorage.obj1220);
var left = obj.left;
var right = obj.right;
var left = left.filter(function (a, b) {
//console.log("a:",a,"b:",b);
return tempArr1.indexOf(a) == -1;
});
console.log("left:", left);
right = right.concat(tempArr1);
console.log("right:", right);
obj.left = left;
obj.right = right;
localStorage.obj1220 = JSON.stringify(obj);
showDom(left, box6);
showDom(right, box7);
tempArr1 = [];
} else {
alert("请选择要添加的项");
}
}
box7.onclick = function (event) {
var e = event || window.event;
upd(0, e);
}
del.onclick = function () {
if (tempArr2.length > 0) {
var obj = JSON.parse(localStorage.obj1220);
var left = obj.left;
var right = obj.right;
var right = right.filter(function (a, b) {
//console.log("a:",a,"b:",b);
return tempArr2.indexOf(a) == -1;
});
console.log("left:", left);
left = left.concat(tempArr2);
console.log("right:", right);
obj.left = left;
obj.right = right;
localStorage.obj1220 = JSON.stringify(obj);
showDom(left, box6);
showDom(right, box7);
tempArr2 = [];
} else {
alert("请选择要添加的项");
}
}
function upd(f, e) {
//console.log("e:",e);
var d = e.path[2];
var lis = d.querySelectorAll("li");
lis = Array.prototype.slice.call(lis);
var i = 0;
var obj = JSON.parse(localStorage.obj1220);
var left = obj.left;
var right = obj.right;
if (e.target.nodeName == "LI") {
i = lis.indexOf(e.target);
if (e.target.classList.contains("active")) {
e.target.classList.remove("active");
if (f) {
var a = tempArr1.indexOf(left[i]);
tempArr1.splice(a, 1);
} else {
var b = tempArr1.indexOf(right[i]);
tempArr2.splice(b, 1);
}
} else {
e.target.classList.add("active");
if (f) {
tempArr1.push(left[i]);
} else {
tempArr2.push(right[i]);
}
}
}
console.log("tempArr1:", tempArr1);
console.log("tempArr2:", tempArr2);
}
function all(f) {
var obj = JSON.parse(localStorage.obj1220);
var left = obj.left;
var right = obj.right;
if (f) {
right = right.concat(left);
left = [];
} else {
left = left.concat(right);
right = [];
}
obj.left = left;
obj.right = right;
localStorage.obj1220 = JSON.stringify(obj);
showDom(left, box6);
showDom(right, box7);
}
function showDom(arr, dom) {
dom.innerHTML = "";
var li = "";
for (var i = 0; i < arr.length; i++) {
if (arr[i]) {
li += "<li>" + arr[i] + "</li>";
}
}
dom.innerHTML = li;
}
</script>
</body>
</html>
上下穿梭
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/css.css" />
</head>
<body>
<div id="app">
<div id="entry">
<label>
频道名称:<input type="text" id="moduleName" />
</label>
<button type="button" id="add">添加</button>
</div>
<div>
<div id="up">
<h2>未选频道</h2>
<div id="upBox"></div>
</div>
<div id="down">
<h2>我的频道</h2>
<div id="downBox"></div>
</div>
</div>
</div>
<script src="./js/js.js"></script>
</body>
</html>
//获取到频道名称模块
var moduleName = document.getElementById("moduleName");
// 获取到添加按钮
var add = document.getElementById("add");
// 获取到上方盒子
var upBox = document.getElementById("upBox");
// 获取到下方盒子
var downBox = document.getElementById("downBox");
// 从本地拿取数据
var obj = localStorage.obj0719;
console.log("obj:", obj);
// 如果有数据的话就进行页面渲染
if (obj) {
obj = JSON.parse(obj);
var up = obj.up;
var down = obj.down;
// 渲染页面
showDom(upBox, up);
showDom(downBox, down);
} else {
// 如果没有的话就创建一个对象，其中包括两个数组
obj = {
up: [],
down: []
}
localStorage.obj0719 = JSON.stringify(obj);
// 把obj对象保存到本地obj719中
}
// 给添加点击事件
add.onclick = function () {
// 拿到要添加的值
var module = moduleName.value;
// 如果有数据就加到up数组中
if (module) {
var obj = JSON.parse(localStorage.obj0719);
var up = obj.up;
up.push(module);
// 保存本地
localStorage.obj0719 = JSON.stringify(obj);
var down = obj.down;
//渲染页面
showDom(upBox, up);
showDom(downBox, down);
} else {
// 如果没有内容就弹出不能为空
alert("频道名称不能为空");
}
}
// 封装渲染函数
function showDom(dom, arr) {
console.log(dom.id)
var str = "";
// 如果dom.id===upBox的话就在前面加上+反之就不加
if (dom.id == "upBox") {
str = "+"
} else {
str = "";
}
dom.innerHTML = "";
var div = "";
for (let i = 0; i < arr.length; i++) {
div += "<div class='modules'><div>" + str + arr[i] + "</div><span class='close'>x</span></div>"
}
dom.innerHTML = div;
}
upBox.onclick = function (event) {
var event = event || window.event;
//console.log("event:",event,event.target.tagName,event.srcElement.tagName);
var dom = event.target || event.srcElement;
if (dom.tagName == "DIV") {
console.log(dom)
dom.ondblclick = function () {
//console.log("this:",this);
var obj = JSON.parse(localStorage.obj0719);
var up = obj.up;
var down = obj.down;
//console.log("1 obj",obj);
var str = this.innerHTML;
str = str.slice(1);
var i = up.indexOf(str);
//console.log("i:",i);
up.splice(i, 1);
down.push(str);
obj.up = up;
obj.down = down;
//console.log("2 obj:",obj);
localStorage.obj0719 = JSON.stringify(obj);
showDom(upBox, up);
showDom(downBox, down);
}
} else {
}
}
downBox.onclick = function (event) {
var event = event || window.event;
//console.log("event:",event,event.target.tagName,event.srcElement.tagName);
var dom = event.target || event.srcElement;
//console.log("12dom",dom);
if (dom.tagName == "DIV") {
dom.onclick = function () {
dom.parentNode.classList.toggle("close");
dom.nextSibling.onclick = function () {
//console.log("123dom",dom);
var obj = JSON.parse(localStorage.obj0719);
var up = obj.up;
var down = obj.down;
var str = dom.innerHTML;
console.log("str", str);
var i = down.indexOf(str);
console.log("i:", i);
down.splice(i, 1);
up.push(str);
obj.up = up;
obj.down = down;
console.log("2 obj:", obj);
localStorage.obj0719 = JSON.stringify(obj);
showDom(upBox, up);
showDom(downBox, down)
}
}
} else {
}
}
#app{
width: 800px;
margin: auto;
}
#up,
#down
{
border: 1px solid red;
margin: 10px;
width: 500px;
}
#upBox,
#downBox{
display: flex;
flex-wrap: wrap;
}
.modules>div{
width: 80px;
height: 40px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background-color: #ddd;
text-align: center;
line-height: 40px;
cursor: pointer;
margin: 10px;
}
div.modules:hover>div
{
background-color: #f90;
}
div.modules span.close{
display: none;
}
div.modules.close{
position: relative;
}
div.modules.close span.close{
position: absolute;
top: 3px;
right: 10px;
display: inline-block;
color: red;
cursor: pointer
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
