使用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 ...
随机推荐
- jquery的val()
jQuery 属性操作 - val() 方法 jQuery 属性操作参考手册 实例 设置输入域的值: $("button").click(function(){ $(": ...
- Java_MD5的使用
在Java中使用MD5摘要还是很方便的,直接上代码. package com.cxc.nothing; import java.nio.charset.Charset; import java.sec ...
- CSS学习（二）- 有关 hasLayout 和 BFC
1. hasLayout 概念说明 ‘Layout’ 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout . ‘Layout’ 在 IE 中可以通 ...
- 支付宝热补丁技术— AndFix原理[阿里Hao]
本文由嵌入式企鹅圈原创团队成员.阿里资深project师Hao分享. 上次我们介绍了用dexposed方案实施热补丁的原理.它本质上就是hook要改动的函数.这样一来在正式版本号公布时就不能直接拿热补 ...
- 转载： vim使用技巧
两篇很牛的vim使用技巧 来源: ChinaUnix博客 日期: 2009.07.06 10:18 (共有条评论) 我要评论 读本文之前请注意:1. 本文的目标是提供一些vim的使用技巧,利用 ...
- 三个内置模块shutil logging hashlib config
高级的 文件.文件夹.压缩包 处理模块 shutil.copyfileobj(fsrc, fdst[, length])将文件内容拷贝到另一个文件中 1 import shutil 2 3 shuti ...
- Linux学习目录
一.CentOS for Linux 大神博客:骏马金龙 Linux也可以参考,这篇博客进行学习 http://www.cnblogs.com/f-ck-need-u/p/7048359.html ...
- Android获取网络类型
public static final String NETWORK_CLASS_UNKNOWN = "unknown"; public static final String N ...
- Android无线测试之—UiAutomator UiSelector API介绍之二
Android的布局与组件及组件属性介绍 一.布局: 1)线性布局:控价在线性方向上一次排列 2)表格布局:向表格一样有标准的行和列 3)相对布局:通过相对定位的方式让控件出现在布局的任何位置 4)帧 ...
- unintest基础1
import unittest class Testfunc(unittest.TestCase): def testfunc(self): print('testfunc1') def testfu ...