使用jQuery方法做任务左右栏移动
<!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{width: 1100px;height: 400px; background-color: #2effff;}
.zl{width: 200px;height: 30px;background-color: #d4ff19;border: 2px red solid;
font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px;
top: 30px; }
.zl2{width: 200px;height: 30px;background-color: #d4ff19;border: 2px red solid;
font-family: "楷体";text-align: center;vertical-align: middle;font-size: 25px;
top: 30px; }
.middle1{width: 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{width: 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{width: 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{width: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>
使用jQuery方法做任务左右栏移动的更多相关文章
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- [转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理
原文地址:http://www.iteye.com/topic/1081739 上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic ...
- jQuery方法区别:click() bind() live() delegate()区别
今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...
- 原生JS取代一些JQuery方法的简单实现
原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选 ...
- js与jQuery方法对比
javascript与jQuery方法对比jquery对象转dom对象 // 方式一(推荐使用) $("input")[0] // 方式二 $("input" ...
- jQuery高性能自己定义滚动栏美化插件
malihu是一款高性能的滚动栏美化jQuery插件. 该滚动栏美化插件支持水平和垂直滚动栏,支持鼠标滚动,支持键盘滚动和支持移动触摸屏. 而且它能够和jQuery UI和Bootatrap完美的结合 ...
- 1.4 jQuery方法，JSON介绍
jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...
- SpringMVC框架下实现JSON（类方法中回传数据到jsp页面，使用jQuery方法回传）
JSON的实现,即将需要的数据回传到jsp页面: 1>.加入实现Json的三个架包到lib中:2>.目标方法上边加入注解,需要返回的值3>.在jsp页面中书写jQuery方法: ec ...
- 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）
HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
随机推荐
- 5 月 35 日临近，Google 无法访问，可以使用 Google IP 来解决。
每年都会有几天那啥,你懂的. 直接使用 Google 的域名访问经常会打不开,而使用 Google 的 IP 就会很顺畅. 使用 Chrome 浏览器我们经常都会在地址栏直接搜索,所以我们只要添加一个 ...
- Netbeans取消CTRL+\才能代码提示的方法
更好的方法: ------------------------------------------------------------ 边打字边按CTRL+\进行代码提示的方法我TM也是醉了 简而言之 ...
- java中过滤四字节字符
private static final String FOUR_BYTE_FILTER = "[\\ud800\\udc00-\\udbff\\udfff\\ud800-\\udfff]& ...
- 虚机下Ubuntu与Win7文件共享
使用Samba服务实现虚机与本机的文件共享,简单的分为以下几个步骤,按部就班,so easy 1.安装smb sudo apt-get install samba sudo apt-get insta ...
- consul eureka区别（来自Consul官网）
consul 与 eureka Eureka是一个服务发现工具.该体系结构主要是客户端/服务器,每个数据中心有一组Eureka服务器,通常每个可用区域一个.通常Eureka的客户使用嵌入式SDK来注册 ...
- Linux 进程创建二（execve和wait）
三:execve系统调用 int execve(const char *filename, char *const argv[],char *const envp[]); fork创建了一个新的进程, ...
- python cookies 爬虫处理
Cookie Cookie 是指某些网站服务器为了辨别用户身份和进行Session跟踪,而储存在用户浏览器上的文本文件,Cookie可以保持登录信息到用户下次与服务器的会话. Cookie原理 HTT ...
- UML Rose2003完美破解攻略
Rational Rose 2003 软件project画图软件 ,当然还不止画图,对于那些不想用英文版Rational Rose2003的同志们.这个Rational Rose2003 版本号已经汉 ...
- 在EntityFramework（EF）中删除主从表记录
删除主表: 如果要删除单个的Book对象,由于启用了级联删除,干掉一个Book,它所关联的所有BookReview也一并删除了. (说的简单,如果用Attach方法或者Remove,加修改删除状态, ...
- hdu 4421(枚举+2-sat)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4421 思路:枚举32位bit,然后2-sat判断可行性,这里给出2-sat矛盾关系构图: 1.a&am ...