<!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. grub的三种安装方式

    1.install命令 install: install [--stage2=STAGE2_FILE] [--force-lba] STAGE1 [d] DEVICE STAGE2 [ADDR] [p ...

  2. linux系统之free命令详解

    total used free shared buffers cached Mem: -/+ buffers/cache: Swap: 上面是free命令的执行结果,下面我来详细说说其中的含义: Me ...

  3. redis常用数据类型 HyperLoglog

    1.HyperLoglog简介 HyperLoglog是redis新支持的两种类型中的另外一种(上一种是位图类型Bitmaps).主要适用场景是海量数据的计算.特点是速度快.占用空间小. 同样是用于计 ...

  4. 【转】Monkey测试2——Monkey测试策略

    Monkey的测试策略 一. 分类 Monkey测试针对不同的对象和不同的目的采用不同的测试方案,首先测试的对象.目的及类型如下: 测试的类型分为:应用程序的稳定性测试和压力测试 测试对象分为:单一a ...

  5. 离散数学及其应用（Discrete Mathematica With Application 7th）学习笔记 第一章

    目前本人只进行到了第五章的章末补充练习,应该是从4月6号开始学习的,又是英文版,而且基本就下班回家抽2个小时左右去学,所以进度较慢. 由于本质是数学,除了一些程序处理和大计算量的问题,基本上一本草稿本 ...

  6. python django -6 常用的第三方包或工具

    常用的第三方包或工具 富文本编辑器 缓存 全文检索 celery 布署 富文本编辑器 借助富文本编辑器,管理员能够编辑出来一个包含html的页面,从而页面的显示效果,可以由管理员定义,而不用完全依赖于 ...

  7. Hook length formula 学习笔记 UVALive 6625

    最近做到一个关于杨氏矩阵的题目. UVALive 6625 题目大意是用n以内的数填充杨氏矩阵,要求行严格递增,列不严格递增. 求方案数. 数据范围很小,我直接上爆搜,结果TLE了. 后来发现一位学长 ...

  8. SharePoint2013导入Excel到列表

    using Microsoft.SharePoint; using System; using System.Collections.Generic; using System.ComponentMo ...

  9. java微信开发API解析（四）-自己定义菜单以及个性化菜单实现

    全局说明 * 具体说明请參考前两篇文章. 本文说明 *本文分为五部分: * 工具类AccessTokenUtils的封装 * 自己定义菜单和个性化菜单文档的阅读解析 * 菜单JSON的分析以及构建相应 ...

  10. Java StuNote 1

    1. JAVA语言历史 无心插柳柳成荫,有心栽花花不开. JAVA由SUN Microsystem公司研发. 2. JAVA语言特点 a) 跨平台.一次编译.到处执行. b) 速度慢.但非常稳定, 没 ...