2011-05-12 10:10 jquery实现DIV层拖动 <!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>拖动DIV</title>

   <style type="text/css">

    .show{

     background:#7cd2f8;

     width:100px;

     height:100px;

     text-align:center;

     position:absolute;

     z-index:1;

     left:100px;

     top:100px;

    }  

   </style>

   <script type="text/javascript" src="js/jq.js"></script>

   <script type="text/javascript"><!--

    $(document).ready(function()

    {

        $(".show").mousedown(function(e)//e鼠标事件

        {

            $(this).css("cursor","move");//改变鼠标指针的形状  

            var offset = $(this).offset();//DIV在页面的位置

            var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离

            var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离

            $(document).bind("mousemove",function(ev)//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件

            {

                $(".show").stop();//加上这个之后  

                var _x = ev.pageX - x;//获得X轴方向移动的值

                var _y = ev.pageY - y;//获得Y轴方向移动的值  

                $(".show").animate({left:_x+"px",top:_y+"px"},10);

            });  

        });  

        $(document).mouseup(function()

        {

            $(".show").css("cursor","default");

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

        })

    })  

// --></script>

</head>

<body>

   <div class="show">

    jquery实现DIV层拖动

   </div>

</body>

</html>

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

        <title>test2.html</title>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

       <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

        <script type="text/javascript">

            $(document).ready(function(){

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

                    createDiv("hid", "dogdog");

                });

            });

            function createDiv(id, label, left, top)

            {

                $("body").append($("<div style=''>我是可以拖动的</div>").attr("id", id).text(label));

                $("#" + id).css({"background":"red", "position":"absolute", "width":"880", "height":"120"});

                $("#hid").mousedown(function(event){

                    var offset=$("#hid").offset();

                    x1=event.clientX-offset.left;

                    y1=event.clientY-offset.top;

                    $("#hid").mousemove(function(event){

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

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

                    });

                    $("#hid").mouseup(function(event){

                     $("#hid").unbind("mousemove");

                    });

                });

            }

       </script>

    </head>

    <body>

        <input type=button value="点我显示div" id="bu">

    </body>

</html>

div 移动的更多相关文章

  1. IE6/7下空div占用空间的问题

    最近注意力没在前端上面,工作碰到这样一个问题,下意识的写了句 font-size:0;line-height:0;哪知道引发了更大的bug.后来插入数据进去的时候都不显示了..再后来百度一番找到,原来 ...

  2. div实现自适应高度的textarea，实现angular双向绑定

    相信不少同学模拟过腾讯的QQ做一个聊天应用,至少我是其中一个. 过程中我遇到的一个问题就是QQ输入框,自适应高度,最高高度为3row. 如果你也像我一样打算使用textarea,那么很抱歉,你一开始就 ...

  3. 冒泡，setinterval，背景图的div绑定事件，匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  4. css居中div的几种常用方法

    在开发过程中,很多需求需要我们居中一个div,比如html文档流当中的一块div,比如弹出层内容部分这种脱离了文档流等.不同的情况有不同的居中方式,接下来就分享下一下几种常用的居中方式. 1.text ...

  5. Div Vertical Menu ver5

    这个小功能,如果是算此次,已经是第5次修改了.可以从这里看到前4次:V1, http://www.cnblogs.com/insus/archive/2011/10/17/2215637.html V ...

  6. 计算Div标签内Checkbox个数或已被disabled的个数

    先看下面的html: 计算div内的checkbox个数:$('#divmod input[type="checkbox"]').length 计算div内checkbox被dis ...

  7. [jquery]显示隐藏div标签的几种方法

    1.$("#demo").attr("style","display:none;");//隐藏div $("#demo" ...

  8. CSS3变形记(上)：千变万化的Div

    传统上,css就是用来对网页进行布局和渲染网页样式的.然而,css3的出现彻底打破了这一格局.了解过css3的人都知道,css3不但可以对网页进行布局和渲染样式,还可以绘制一些图形.对元素进行2D和3 ...

  9. 如何隐藏DIV对象

    DIV对象在网页里面,相当于一个容器,在其内部,可以显示文字.图片.视频控件等等. 以下的教程,和大家一起来学习,如何隐藏DIV对象. 这必须使用CSS来控制,才能达到隐藏的目的,那么,就得使用CSS ...

  10. css实现div，文字水平居中的方案。

    本文的目的为记录个人开发中常用的几种居中方案,以供大家参考. //basic css html, body { height: 100%; width: 100%; margin: 0; paddin ...

随机推荐

  1. MVC4 Action 两种异步方式

    1. xxxAsync/xxxCompleted 组合方式异步,xxxCompleted  就是他的回调函数,在执行完 xxxAsync 后调用xxxCompleted  . 使用 异步方式必须继承A ...

  2. 【洛谷九月月赛T1】签到题（bsgs）（快速乘）

    说好的签到题呢qwq....怎么我签到题都不会啊qwq 之后看了bsgs才发现貌似不是那么那么难fake!!什么东西... 先贴上部分分做法(也就是枚举1的个数,然后每一步都进行取模(这和最后取模结果 ...

  3. 15、xtrabackup 全量备份

    xtrabackup 全量备份与恢复 安装 yum install https://www.percona.com/downloads/XtraBackup/Percona-XtraBackup-2. ...

  4. [ActionScript 3.0] 动态链接库

    很多时候,我们为了项目和程序结构更加清晰,需要将发布好的swf放到一个固定的地方供主文件引用,这时就会出现发布好的swf所用的as类路径发生改变,为避免这个问题,需要用到动态链接库,以下做一个简单例子 ...

  5. ArchLinux pacman 提高俩倍下载速度方法

    pacman能够调用外部下载工具来代替默认的wget来给pacman提速 比如将/etc/pacman.conf中 XferCommand = /usr/bin/wget –passive-ftp - ...

  6. 2016级算法第二次上机-D.Bamboo的饼干

    Bamboo的饼干 分析 从两个数组中各取一个数,使两者相加等于给定值.要注意去重和排序 难度不大,方法很多,基本只要不大于O(n^2 ) 的都可以过.本意想考察二分搜索 还可以借助stl中的map, ...

  7. 题目1018：统计同成绩学生人数（hash简单应用）

    问题来源 http://ac.jobdu.com/problem.php?pid=1018 问题描述 给你n位同学的成绩,问获得某一成绩的学生有多少位. 问题分析 初见此题,有人会想到先将所有成绩存入 ...

  8. git 和 repo 常用命令

    一.git 1.回退到某个节点 git reset --hard f39043d1c0cd1cda45a4569556758d0c00bf329a 2.查看提交记录 git log git log - ...

  9. 海思3519A上移植OpenCV3.x

    环境安装与准备 下载opencv3.4.1. 或者 下载opencv3.2.0. 进入到opencv所在的目录新建目录build,install 安装cmake: apt-get install cm ...

  10. Smarty带来的神秘的数字1

    问题的引发:在htmly页面通过smarty模板引擎开启session_start()后,突发发现页面无故多了一个  神秘的数字 1 问题界面: 代码: 测试:在session_start()行末加2 ...