<!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>

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

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

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

  2. JS实现拖动div层移动

    JS实现拖动div层移动 在谈到拖动div层之前,我们有必要来了解下 下面JS几个属性的区别----  pageX,pageY,layerX,layerY,clientX,clientY,screen ...

  3. JQuery Div层滚动条控制（模拟横向滚动条在最顶端显示）

    想让DIV层滚动条显示在顶端,CSS样式没找到相关属性,于是用2个DIV层来模拟做了一个.经测试IE浏览器上显示并不太美观!不知道是否还有更好的办法可以实现这功能呢?   aaaaaaasssssss ...

  4. jQuery Layer 弹层组件

    layer是一款近年来口碑非常不错的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富友好的操作体验. 在与同类组件的比较中,layer总是能轻易获胜.她 ...

  5. jQuery实现浮动层跟随页面滚动效果

      helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery  滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...

  6. JQuery弹出层，实现弹层切换，可显示可隐藏。

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  7. 点击按钮弹出一个div层

    JQuery弹出层,点击按钮后弹出遮罩层,还有关闭按钮 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml& ...

  8. js点击弹出div层

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

  9. JQuery弹出层，点击按钮后弹出遮罩层，有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. xp多网卡静态路由设置方法

    xp多网卡静态路由设置方法 一.多个IP都在同一网段或VALN.这类情况没什么好说的,在各块网卡的本地连接属性里设置好IP地址.子网掩码和默认网关即可. 二.多个IP属于不同网段或VLAN.这时如果按 ...

  2. Spring与Hibernate集成中的Session问题

    主要讨论Spring与Hibernate集成中的session问题 1．通过getSession()方法获得session进行操作 public class Test extends Hibernat ...

  3. Lost's revenge - HDU 3341 (自动机+DP)

    题目大意:先给你一些子串,然后给你一个母串,母串里面的字母可以任意调换位置,问最多这个母串经过一些位置变动最多能包含多少个子串.   分析:可以比较明显的看出来的DP,先求出来ATGC分别有多少,然后 ...

  4. provider: 命名管道提供, error: 40 - 无法打开 SQL Server 联系)

    李和server连接错误. 在连接 SQL Server 2005 时刻.在默认设置 SQL Server 不同意的远程连接可能导致此故障. (provider: 命名管道提供, error: 40 ...

  5. iOS中navigationItem的titleView如何居中

    开发过程中,发现titleview很难居中,通过各种尝试终于找到了解决方法. 首先清楚你个概念: leftBarButtonItem,导航条中左侧button. rightBarButtonItem, ...

  6. zabbix图中出现中文乱码问题

    我这周部署了zabbix监控服务器,但是配置过程中发现当有中文时,图中的中文会变成方块 如下图所示: 这个问题是由于zabbix的web端没有中文字库,我们最需要把中文字库加上即可 解决办法如下 1. ...

  7. poj 1201 Interval （查分约束）

    /* 数组开大保平安. 查分约束: 输入的时候维护st和end 设每个点取元素di个 维护元素个数前缀和s Sbi-Sai-1>=ci 即:建立一条从ai-1到bi的边 权值为ci 表示ai到b ...

  8. jQuery的live()方法对hover事件的处理示例

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法 当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数. 当鼠标移出这个元素时,会触发指定的第二个 ...

  9. Bootstrap Modal 框 alert confirm loading

    /** * Created by Administrator on 2016/5/4. */ /** * 模态窗口 */ window.Modal = { tpls:{ alert:'<div ...

  10. CoreLocation+MapKit系统定位(含坐标以及详细地址)

    iOS8 之后出现一些新的配置 [self.manager requestWhenInUseAuthorization]; 并且在info.plist文件中增加 NSLocationWhenInUse ...