<!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方法做任务左右栏移动的更多相关文章

  1. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  2. [转]Spring3 MVC + jQuery easyUI 做的ajax版本用户管理

    原文地址:http://www.iteye.com/topic/1081739 上周写了篇基于spring3.0.5 mvc 简单用户管理实例 ( http://www.iteye.com/topic ...

  3. jQuery方法区别:click() bind() live() delegate()区别

    今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p",&qu ...

  4. 原生JS取代一些JQuery方法的简单实现

    原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧   1.选 ...

  5. js与jQuery方法对比

      javascript与jQuery方法对比jquery对象转dom对象 // 方式一(推荐使用) $("input")[0] // 方式二 $("input" ...

  6. jQuery高性能自己定义滚动栏美化插件

    malihu是一款高性能的滚动栏美化jQuery插件. 该滚动栏美化插件支持水平和垂直滚动栏,支持鼠标滚动,支持键盘滚动和支持移动触摸屏. 而且它能够和jQuery UI和Bootatrap完美的结合 ...

  7. 1.4 jQuery方法，JSON介绍

    jQuery方法: jQuery添加元素: append()方法: $("元素").append("追加内容"); prepend()方法: $("元 ...

  8. SpringMVC框架下实现JSON（类方法中回传数据到jsp页面，使用jQuery方法回传）

    JSON的实现,即将需要的数据回传到jsp页面: 1>.加入实现Json的三个架包到lib中:2>.目标方法上边加入注解,需要返回的值3>.在jsp页面中书写jQuery方法: ec ...

  9. 形行色色的下拉菜单（HTML/CSS JS方法 jQuery方法实现）

    HTML/CSS方法实现下拉菜单来源:慕课网<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

随机推荐

  1. shell脚本之read工具

    #!/bin/bash # -*- coding: utf-8 -*- # echo -n "please input your name: " read name echo &q ...

  2. python简单网页服务器示例

    参考:http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000/00138683268974 ...

  3. jedis连接池的参数配置

     <!-- 连接池的配置信息 --> <bean id="jedisConfig" class="redis.clients.jedis.Jedis ...

  4. ffmpeg中的x264编码选项,对应关系

    )’ Disabled. ‘variance (1)’ Variance AQ (complexity mask). ‘autovariance (2)’ Auto-variance AQ (expe ...

  5. 【转】windows下python开发环境搭建

    1 -- 安装python的前期准备 Python开发有众多工具,又以Eclipse+Pydev最为常见.Eclipse平台对开发同学来讲,肯定是如雷贯耳,自不用废话.而PyDev是Eclipse平台 ...

  6. Web Services 概要

    WSDL WSDL 是基于 XML 的用来描述 Web services 以及如何访问它们的一种语言. WSDL 可描述 web service,连同用于 web service 的消息格式和协议的细 ...

  7. Eclipse 创建 Java 包

    打开新建 Java 包向导 你可以使用新建 Java 包向导来创建 Java 包.Java 包向导打开方式有: 通过点击 "File" 菜单并选择 New > Package ...

  8. 转载：给bash的提示符设置不同的颜色 一个很常用的功能，效果如下：

    原文来自:http://www.cnblogs.com/cyttina/archive/2013/01/08/2850406.html 一个很常用的功能,效果如下: 这样就可以很轻易的将输入的指令和其 ...

  9. TypeError: write() argument must be str, not bytes

    w文件打开以 '二进制'  方式: with open('teacher.html','wb+') as f: f.write(response.body) 要写入"中文",防止乱 ...

  10. hdu1829(A Bug's Life)

    题目链接:传送门 题目大意:有n个昆虫,有m组关系,接下来m行表示两个昆虫性别不同,问是否有矛盾情况(同男同女) 题目思路:并查集的高级应用,开两倍数组大小,后n个数组表示和当前昆虫不同性别的集合 # ...