<!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>
<script type="text/javascript" src="0621popwindow/jquery-1.11.2.min.js"></script>
</head>
<style type="text/css">
*{margin: 10px auto auto 32px;
}
.wk{ 1100px;height: 400px; background-color: #2effff;}
.zl{ 200px;height: 30px;background-color: #d4ff19;border: 2px red solid;
font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px;
top: 30px; }
.zl2{ 200px;height: 30px;background-color: #d4ff19;border: 2px red solid;
font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px;
top: 30px; }
.middle1{ 130px;height: 60px;
left: 370px;top: 60px;border: 2px mediumvioletred solid;position: absolute;
font-family: "黑体";text-align: center;vertical-align: middle;font-size: 25px;}
.middle2{ 130px;height: 60px;
left: 370px;top: 160px;border: 2px mediumvioletred solid;position: absolute;
font-family: "黑体";text-align: center;vertical-align: middle;font-size: 25px;}
.jieshou{ 200px;height: 30px;background-color: #d4ff19;border: 2px red solid;
font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px;
top: 3px; left: 7px;position: absolute;z-index: 3;}
#right{200px; height:300px; float:left;background-color:#0CF;right: 150px;
position: absolute ;top: 30px}
</style>
<body>
<div class="wk">
<div>
<div class="zl">楚留香</div>
<div class="zl">陆小凤</div>
<div class="zl">铁中棠</div>
<div class="zl">李寻欢</div>
<div class="zl">叶孤城</div>
<div class="zl">花满楼</div>
<div class="zl">西门吹雪</div>
</div>
<div class="middle1" >单个转移</div>
<div class="middle2">多个转移</div>
<div id="right"></div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e){
$(".zl").click(function(){
//清除所有选中颜色
$(".zl").css("background-color","#d4ff19");
$(".zl").attr("xz",0);
//设置选中
$(this).css("background-color","#1DC71E");
$(this).attr("xz",1);
})
//移动一项
$(".middle1").click(function(){
var xuanzhong=$(".zl");
for (var i=0;i<xuanzhong.length;i++)
{
//判断选中的某一项
if(xuanzhong.eq(i).attr("xz")==1)
{
var zhi=xuanzhong.eq(i).text();
//
if(Has(zhi))
{
var str = "<div class='zl2'>"+zhi+"</div>";
$("#right").append(str);
}
}
}
})
$(".middle2").click(function(){
var lift = $(".zl");
for (var i=0;i<lift.length;i++)
{
var zhi = lift.eq(i).text();
if (Has(zhi))
{
var str = "<div class='zl2'>"+zhi+"</div>";
$("#right").append(str);
}
}
})
});
function Has(zhi)
{
var list=$(".zl2");
var iscunzai=true;
for (var i=0;i<list.length;i++)
{
if(list.eq(i).text()==zhi)
{
iscunzai = false;
break;
}
}
return iscunzai;
}
</script>
</html>