<!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. hibernate配置文件再写

    hibernate配置文件主要用于配置数据库连接和hibernate运行时所需的各种属性,每个hibernate配置文件对应一个Configuration对象,hibernate的配置文件有两种格式, ...

  2. Manjaro折腾笔记：我的数据科学环境搭建之路

    ss并且开机启动 0. 安装shadowsocks sudo pip install shadowsocks 1. 建立配置文件ss.json 我的位置是:/home/ray/Documents/sh ...

  3. java开发目前技术选型

    目前系统采用 1.后端 服务框架:Dubbo.zookeeper 缓存:Redis.ehcache 消息中间件:ActiveMQ,kafka 负载均衡:Nginx 分布式文件:FastDFS 数据库连 ...

  4. Spring MVC资源绑定视图解析器

    ResourceBundleViewResolver使用属性文件中定义的视图bean来解析视图名称. 以下示例显示如何使用Spring Web MVC框架中的ResourceBundleViewRes ...

  5. C#调用python脚本

    因项目需要,需要使用C#控制台程序执行python脚本,查询各种资料后可以成功调用了,记录一下,以备后面遗忘. 只尝试了两种调用方式,第一种只适用于python脚本中不包含第三方模块的情况,第二种针对 ...

  6. AsyncTask工作机制简介

    昨天写的图片的三级缓存,假设有兴趣,能够去看下,浅谈图片载入的三级缓存原理(一) http://blog.csdn.net/wuyinlei/article/details/50606455 在里面我 ...

  7. charles_https_通过模拟器安装APP然后抓包

    声明,方法参考链接:https://bbs.pediy.com/thread-226435.htm 使用文中的模拟器并不好使,自个使用逍遥模拟器的4.4版本成功抓包, 1>下载逍遥模拟器,在逍遥 ...

  8. linux之shell之if、while、for语句介绍

    一.基本判断条件 1)逻辑运算符 -a    expr1 -a expr2    逻辑与 -o    expr1 -o expr2    逻辑或 !     !expr1                ...

  9. 如何停止和扭转UIView的动画

    本文转载至  http://codego.net/576089/ 我有它收缩时碰到切换按钮UIView的动画跳和它扩展恢复到原来的大小当再次接触到按钮.密封式前大灯一切都工作得很好.问题是,动画师注意 ...

  10. jmeter 响应数据更换显示类型（json、html、text）

    .默认情况下是Text格式 2.修改为json格式显示