显示了一个左右删除的功能(都是用的div) , 还有没有简单一点的写法 , html前端知识

本文链接：https://blog.csdn.net/qq_39237554/article/details/79492587

实现了一个左右删除的功能

全部都是用 div实现的

代码 ↓

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style>
.selectDiv{border:1px black solid;width:800px;height:500px;margin:auto;}
.selectLeft,.selectRight,.selectMiddle{width:300px;height:500px;border:1px black solid;float:left;box-sizing: border-box;}
.selectMiddle{width:200px;height:500px;}
    .selectLeft div,.selectRight div{widht:100%;}
	    .selectLeft div:hover,.selectRight div:hover{outline:2px #A5C7FE solid;}
	.selectMiddle button{margin-left:50px;}
	.selectMiddle button:nth-of-type(1){margin-top:90px;}
	.selectMiddle button:nth-of-type(2),.selectMiddle button:nth-of-type(3),.selectMiddle button:nth-of-type(4)
	                                     {margin-top:50px;margin-left:60px;}
	.selectMiddle button:nth-of-type(4){margin-left:50px;}
</style>



</head>

<body>
<div class="selectDiv" >
<div class="selectLeft" >
    <div>地图1</div>
    <div>地图2</div>
    <div>地图3</div>
</div>


<div class="selectMiddle" >
<button class="selectAllLeft" >全部添加 <<</button>
<button class="selectAddLeft" >添加 <<</button>
<button class="selectAddRight" >>> 删除</button>
<button class="selectAllRight" >>> 全部删除</button>
</div>


<div class="selectRight" >
    <div>世界1</div>
    <div>世界2</div>
    <div>世界3</div>
</div>
</div>

<script type="text/javascript">

// init 
(function(){
	
	// 页面上有多个 selectDiv 的时候可以将此(function)写成一个方法 , 将下面的dom参数穿进来 , 就可以
    var left = document.getElementsByClassName("selectLeft")[0];
	var right = document.getElementsByClassName("selectRight")[0];
	var middle = document.getElementsByClassName("selectMiddle")[0];
	var f = null; // 用于按钮点击事件
	
	var allRight = document.getElementsByClassName("selectAllRight")[0];
	var allLeft = document.getElementsByClassName("selectAllLeft")[0];
	var addLeft = document.getElementsByClassName("selectAddLeft")[0];
	var addRight = document.getElementsByClassName("selectAddRight")[0];
	
	// All to right
	allRight.addEventListener("click",function(){
		var a = left.getElementsByTagName("div");
		var i = a.length
		while((i--) > 0){
			right.appendChild(a[0]);
		}
	},false);
	
	// All to left
	allLeft.addEventListener("click",function(){
		var a = right.getElementsByTagName("div");
		var i = a.length
		while((i--) > 0){
			left.appendChild(a[0]);
		}
	},false);
	
	// to left add one message
	addLeft.addEventListener("click",function(){
		if(f === null){
			alert("请选择一个元素");
		}
		left.appendChild(f);
	},false);
	
	// to right add one message
	addRight.addEventListener("click",function(){
		if(f === null){
			alert("请选择一个元素");
		}
		right.appendChild(f);
	},false);
	
	// set left add click
	left.addEventListener("click",function(e){
		var target = e.target;
		target.tabIndex = 1;
		target.focus();
		f = target;
	},false);
	
	// 给right 添加点击事件
	right.addEventListener("click",function(e){
		var target = e.target;
		target.tabIndex = 1;
		target.focus();
		f = target;
	},false);
	
	// 给 left 绑定双击事件
	left.addEventListener("dblclick",function(e){
		var target = e.target;
		if(target === this){
			return;
		}
		right.appendChild(target);
	},false);
	
	// 给 right 绑定双击事件
	right.addEventListener("dblclick",function(e){
		var target = e.target;
		if(target === this){
			return;
		}
		left.appendChild(target);
	},false);
}());

</script>
</body>
</html>