您的位置：首页 > Web前端

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

2018-03-09 09:04 543 查看

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

全部都是用 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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： div html js

相关文章推荐

新的分享

章节导航