使用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 ...
随机推荐
- 从‘void*’到‘int’的转换损失精度
在CentOS6.2 64位下编译一下代码,不通过,提示 ./11_2.cpp: In function ‘int main(int, char**)’:./11_2.cpp:28: 错误:从‘voi ...
- Visual Studio 调试小技巧-从查看窗口得到更多信息（转）
原文地址:http://blog.csdn.net/cadcisdhht/article/details/5651488
- CronTrigger中cron表达式使用
1.定时任务,当执行是具体时间的时候,不会立即执行,而是到指定时间执行. 2.实现Job接口时候,类中要有无参的public构造方法. 3.表达式中共用七个字段,按顺序是秒.分.时.日.月.周.年,默 ...
- Python tkinter 用键盘移动没反映修改代码
from tkinter import * def movetriangle(event): if event.keysym == 'Up': canvas.move(a1 ...
- Spring 3 MVC and JSR303 @Valid example
http://www.mkyong.com/spring-mvc/spring-3-mvc-and-jsr303-valid-example/ ———————————————————————————— ...
- Ubuntu下创建JerBrains系列软件的快捷方式
以pycharm为例: 终端输入:sudo gedit /usr/share/applications/Pycharm.desktop模板: [Desktop Entry]Type=Applicati ...
- redhat ent 6.5 virtualbox虚拟机通过桥接方式配置主机-虚拟机的局域网
感谢: http://www.linuxidc.com/Linux/2012-06/62544.htm http://www.2cto.com/os/201204/126178.html Virual ...
- Linux下mongodb安装及数据导入导出教程
Linux下mongodb安装及数据导入导出教程 #查看linux发行版本 cat /etc/issue #查看linux内核版本号 uname -r 一.Linux下mongodb安装的一般步骤 1 ...
- android中TabHost和RadioGroup
android底部菜单应用 博客分类: android--UI示例 TabHostMenuRadioGroupButton 在android中实现菜单功能有多种方法. Options Menu:用户 ...
- HBuilder 连接 夜神安卓模拟器
由于HBuilder的自动扫描机制无法直接连上夜神模拟器,需要通过cmd命令窗口手动处理,才能将两者建立连接. 首先,启动HBuilder和夜神模拟器 然后,打开cmd命令提示符 cd进入夜神模拟器b ...