<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <script src="jquery-1.10.2.js"></script>

  <script>

    $(document).ready(function(){

        var birthInfo = new Array();

        var birthInfoLabel = new Array();

        birthInfo[0] = "a1;a2;a3;a4;a5;a6;a7;a8;a9;a10";

        birthInfoLabel[0] = "张一;张二;张三;张四;张五;张六;张七;张八;张九;张十";

        birthInfo[1] = "b1;b2;b3;b4;b5;b6;b7;b8;b9;b10";

        birthInfoLabel[1] = "李一;李二;李三;李四;李五;李六;李七;李八;李九;李十";

        birthInfo[2] = "c1;c2;c3;c4;c5;c6;c7;c8;c9;c10";

        birthInfoLabel[2] = "王一;王二;王三;王四;王五;王六;王七;王八;王九;王十";

        $("#button1").click(function(){

            $.each(birthInfo,function(k,p){

                var birthInfoss = p.split(";");

                alert(birthInfoss);

            });

        });

        /***********测试可拖动的DIV************/

        $("#button2").click(function(){

            for(var i=1;i<6;i++){

                createDiv("aaa"+i,"测试数据",80+100*i,80);

            }

        });

});

/***********创建可拖动的DIV************/

function createDiv(id, label, offset_left, offset_top)

{

    $("body").append($("<div></div>").attr("id", id).text(label));

    $("#" + id).css({"position":"absolute", "cursor":"move", "border": "1px dotted #000000", "font-size":"12px"});

    $("#" + id).offset({left:offset_left, top:offset_top});

    $("#" + id).mousedown(function(event){

        divId = $(event.target).attr("id");

        $("div").css("background", "#FFFFFF");

        $("#" + divId).css("background", "#eeeeee");

        var offset=$("#" + divId).offset();

        x1=event.clientX-offset.left;

        y1=event.clientY-offset.top; 

        $(document).mousemove(function(event){

            if(!isNaN(event.clientX) && !isNaN(event.clientY)) {

               $("#" + divId).css("left",(event.clientX-x1)+"px");

               $("#" + divId).css("top",(event.clientY-y1)+"px");

            }

        });

        $("#" + divId).mouseup(function(event){

           $(document).unbind("mousemove");

        });

    });

    $(document).keydown(function(event){

        var keyCodeValue = event.keyCode;

        var offsetValue = $("#" + divId).offset();

        if(keyCodeValue == 46) {

            if(divId != "") {

                $("#" + divId).remove();

            }

        }

        switch(keyCodeValue)

        {

            case 37 : $("#" + divId).offset({left:(offsetValue.left - 1)});

            break;

            case 38 : $("#" + divId).offset({top:(offsetValue.top - 1)});

            break;

            case 39 : $("#" + divId).offset({left:(offsetValue.left + 1)});

            break;

            case 40 : $("#" + divId).offset({top:(offsetValue.top + 1)});

            break;

        }

    });

}

  </script>

 </head>

 <body>

    <button id="button1">button1</button>

    <button id="button2">button2</button>

 </body>

</html>

jQuery实现DIV拖动的更多相关文章

  1. jquery div拖动效果示例代码

    div拖动效果想必大家都有见到过吧,实现的方法也是有很多的,下面为大家将介绍使用jquery是如何实现的,感兴趣的朋友不要错过 复制代码代码如下: <%@ page language=" ...

  2. jquery实现DIV层拖动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 基于jquery的可拖动div

    昨天给大家介绍了一款基于jquery ui漂亮的可拖动div实例,今天要给大家分享一款基于jquery的可拖动div.这款可拖动div只要引用jquery就可以,无需引用jquery ui.还实时记录 ...

  4. jQuery制作div板块拖动层排序

    html结构: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  5. 探讨把一个元素从它所在的div 拖动到另一个div内的实现方法

    故事背景: 接到一个新需求,要求用vue搞,主要是拖动实现布局,关键点有:单个组件拖动,一行多列里面的组件拖动,  单个组件可以拖入一行多列里, 单个组件的拖动好实现,关键是把一个组件拖动到另一个类似 ...

  6. 让一个div拖动和让一个panel拖动加拉大拉小

    一.让一个div拖动 <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <hea ...

  7. js实现一个可以兼容PC端和移动端的div拖动效果

    前段时间写了一个简单的div拖动效果,不料昨天项目上正好需要一个相差不多的需求,就正好用上了,但是在移动端的时候却碰到了问题,拖动时候用到的三个事件:mousedown.mousemove.mouse ...

  8. jquery给div,Span, a ，button, radio 赋值取值

    jquery给div的innerHTML赋值 $("#id").html()="test"; //或者 $("#id").html(&quo ...

  9. jquery判断div是否显示或者隐藏

    jquery判断div是否显示或者隐藏 很多时候会要判断一个div是不是显示着,没显示要怎么处理,显示的如何处理: 方法很简单,选择到你要判断的div,再用is(':hidden')判断是否隐藏:或者 ...

随机推荐

  1. java泛型操作复习，以及讲解在android中使用的场景

    android使用泛型的地方很多,比如集成自BaseAdapter实现封装的Adapter,对常用操作进行封装,但是需要对传进来的数据进行处理,此时就使用到泛型,示例如下: public abstra ...

  2. 扩展KMP——算法总结，来自于 迷路的鸽子

    扩展kmp                 LRH 所谓扩展kmp指的是与kmp相似的求辅助数组的原理,但是本身与kmp关系不大. 1.exkmp的用途:给定一个主串s和一个子串t,求出s中每一个后缀 ...

  3. Sass编译Css

    1.我新建了一个项目工程 2.路径在 3.编译 sass 要编译的sass文件名.scss ../存放编译后的css目录/编译后的css名称.css 4.刷新项目,就编译出来了 6.当然,你要嫌麻烦的 ...

  4. qt 汉化 国际化

    两种方法. 1. 使用 QTextCodec  setcodeforname 设置编码, 然后在程序中对于需要处理的字符使用 fromLocal8Bit . 2. 使用 Linguist. 首先把文件 ...

  5. Ubuntu安装Mysql过程及远程问题解决

    ubuntu下执行 sudo apt-get instlll mysql-server sudo apt-get install mysql-client 安装过程中会有文字界面设置密码 牢记密码 M ...

  6. 分享给大家一个简单的数据导出excel类

    <?php /** * 生成excel文件操作 * * @author wesley wu * @date 2013.12.9 */ class Excel { private $limit = ...

  7. Linux入门（三）搭建服务器linux运行环境LAMP/LNMP

    本文内容主要根据慕课网教学视频整理,原链接http://www.imooc.com/learn/170 我用的linux系统是ubuntu 12.04 LTS  虚拟机是VMware Workstat ...

  8. linux命令 time

    功能:用于计算命令执行的世界 语法:  time command 例如: hbg@root:~/dl$ time ls111     apple.sh  b.txt            duplic ...

  9. HDU 1407 测试你是否和LTC水平一样高(枚举)

    测试你是否和LTC水平一样高 Problem Description 大家提到LTC都佩服的不行,不过,如果竞赛只有这一个题目,我敢保证你和他绝对在一个水平线上!你的任务是:计算方程x^2+y^2+z ...

  10. ZUFE 1035 字符宽度编码(字符串)

    Time Limit: 1 Sec  Memory Limit: 128 MB Description 你的任务是编写一个程序实现简单的字符宽度编码方法.规则如下:将任何2~9个相同字符的序列编码成2 ...