<!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. 448. Find All Numbers Disappeared in an Array【easy】

    448. Find All Numbers Disappeared in an Array[easy] Given an array of integers where 1 ≤ a[i] ≤ n (n ...

  2. 李洪强iOS开发之OC语言前期准备

    OC语言前期准备 一.OC简介 Oc语言在c语言的基础上,增加了一层最小的面向对象语法,完全兼容C语言,在OC代码中,可以混用c,甚至是c++代码. 可以使用OC开发mac osx平台和ios平台的应 ...

  3. openwrt安装编译

    官网安装编译推荐: https://wiki.openwrt.org/doc/howto/buildroot.exigence https://wiki.openwrt.org/doc/howto/b ...

  4. Eclipse 创建 Java 包

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

  5. Android仿QQ复制昵称效果2

    本文同步自http://javaexception.com/archives/77 背景: 在上一篇文章中,给出了一种复制QQ效果的方案,今天就来讲讲换一种方式实现.主要依赖的是一个开源项目https ...

  6. 数值孔径NA、分辨率极限与衍射极限

    一.数值孔径  数值孔径(NA):是一个无量纲的数,用以衡量该系统能够收集的光的角度范围.越大,收集到的光越多,分辨率越高. 描述了透镜收光锥角的大小,决定着透镜收光能力和空间分辨率. 数值孔径(NA ...

  7. ubuntu在vmware下使用问题

    问题1: 在vmware虚拟机下安装的ubuntu系统,为了在windows和ubuntu之间拷贝数据方便,所以在vmware上安装了vmware tools.在安装了vmware tool之后会在u ...

  8. react import改为绝对路径

    最近在使用react时发现路径用../../很不方便,特别是修改项目结构时,加减../都能改到吐血, 所有在网上找了半天webpack的配置,特此记录下 module.exports = (webpa ...

  9. vue高级路由

    1.html <script src="https://unpkg.com/vue/dist/vue.js"></script><script src ...

  10. 自然语言处理(NLP)资源

    1.HMM学习最佳范例全文文档,百度网盘链接: http://pan.baidu.com/s/1pJoMA2B 密码: f7az 2.无约束最优化全文文档 -by @朱鉴 ,百度网盘链接:链接:htt ...