<!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. java字符串和时间类型的相互转换

    整理的时间正则可能不全 /****** * * 是以"-" 为分隔符的 * * * * ******/ // 2012-12-03 04:07:34 reg = "\\d ...

  2. error: memcached support requires ZLIB. Use --with-zlib-dir=<DIR> to specify the prefix where ZLIB

    yum install zlib-devel

  3. FreeBSD将SHELL从csh换成bash并支持中文显示

    刚准备在FreeBSD下学习Shell,结果发现怎么好多命令都没有,比如declare.后来发现连bash都没有,好像bash用的多一些吧,于是就准备将csh换成bash. 由于没有bash,所以先得 ...

  4. VLC WebPlugin中文

    Documentation:WebPlugin 这篇文档讲述的是 VLC media player Web plugins 和怎样在网页使用它 Contents 1 介绍: 构建包含video的Web ...

  5. 【转】Android自动化测试（UiAutomator）简要介绍

    一.一个BUG引发的问题   如果研发过程中有一个BUG:“不断的切换手机语言出现花屏现象”.这个问题我们如何验证呢?我想,最好的方式应该是自动化测试.    那么,自动化测试可以完成哪些任务呢?  ...

  6. python 集合set remove update add

    1. 集合(set):把不同的元素组成一起形成集合,是python基本的数据类型. 集合对象是一组无序排列hashable value:集合成员可以做字典的键. 集合就像是 list 和 dict 的 ...

  7. Fedora13下编译busybox-1.15.0出现can not find lcrypt错误

    在Fedora 13 系统上编译busybox(非交叉编译)产生错误 root@localhost # make ... gcc -Wall -Wshadow -Wwrite-strings -Wun ...

  8. openstack组件通讯端口定义

    openstack 组件通讯是通过ZeroMQ+ceilometer发送组件调用信息,具体是通过TCP通讯,发送数据和接收数据是用同一个端口(在配置文件指定),下面通过代码稍作解析: IceHouse ...

  9. 多线程编程中的join函数

    # coding: utf-8 # 测试多线程中join的功能 import threading, time def doWaiting(): print 'start waiting1: ' + t ...

  10. Yii GridView::widget

    GridView::widget文档 http://demos.krajee.com/grid GridView::widget([ 'dataProvider' => $dataProvide ...