使用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 ...
随机推荐
- CONFIG_*头文件的配置
通常在kernel或uboot中, 有很多以CONFIG_*开头的宏配置选项,并且保存在相应的头文件中,那么这些CONFIG_*是怎么生成的呢? 在uboot的顶层Makefile中,有这么一项: 此 ...
- python模块学习之os
16.1. os-复杂的操作系统接口 Source code: Lib/os.py 该模块提供了使用操作系统相关功能的便携式方法. 如果您只想读或写一个文件,请参阅open(),如果要操作路径,请参阅 ...
- Vue 组件3 作用域插槽
作用域插槽是一种特殊类型的插槽,用作使用一个(能够传递数据到)可重用模板替换已渲染元素. 在子组件中,只需将数据传递到插槽,就像你将props传递给组件一样: <div class=" ...
- iOS- 详解文本属性Attributes(转)
iOS- 详解文本属性Attributes 1.NSKernAttributeName: @10 调整字句 kerning 字句调整 2.NSFontAttributeName : [UIFont s ...
- 【Mac + Appium + Python3.6学习(三)】之IOS自动化测试环境配置
在做这一节之前先配置我的另一篇文章所需要安装的前提准备条件:<[Mac + Appium学习(一)]之安装Appium环境前提准备> 一.安装IOS自动化测试环境 配置环境: Appium ...
- Spring MVC静态页面
以下示例显示如何使用Spring MVC Framework编写一个简单的基于Web的应用程序,它可以使用<mvc:resources>标记访问静态页面和动态页面.首先使用Eclipse ...
- xilinx 赛灵思fpga verilog hdl 教程
http://www.eefocus.com/article/08-03/37231s.html http://wenku.baidu.com/link?url=5mdkMmm4BGGi7gRdgSk ...
- virtualenv使用说明
创建虚拟环境virtualenv [虚拟环境名称] 如:virtualenv ENV 启动虚拟环境 cd ENV source ./bin/activate 注意此时命令行会多一个(ENV),ENV为 ...
- ios UICollectionView reloadData无法更新的奇怪问题。
报错 Assertion failure in -[UICollectionViewData invalidateItemsAtIndexPaths:] 近来偶尔用到UICollectionVi ...
- ios - UILabel_长按复制
1.添加长按的手势 UILongPressGestureRecognizer *longGesture = [[UILongPressGestureRecognizer alloc] initWith ...