<!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. FTP软件Filezilla出现“读取目录列表失败”的解决办法

    FTP软件Filezilla出现“读取目录列表失败”情况一般出现在vista/win7系统上,之前在xp上没发现这种情况. 总的来说,不论是打开FTP出现乱码或者显示“读取目录列表失败”均是由字符集引 ...

  2. www.chenbowenblog.com 博客地址转移

    我的新博客地址是 www.chenbowenblog.com 欢迎来访.

  3. 《JavaScript语言精髓与编程实践》读书笔记一

    受到狗哥书单的影响,看到了豆瓣上的评论,买了这本书,然后囫囵吞枣似地用一个月的时间看完了.回头想想自己做的js项目,感觉都羞愧-什么东西都是拿来尝试了一下就用了,其实有很多写得超级丑的地方,看完这个让 ...

  4. MySQL用命令行复制表的方法

    mysql中用命令行复制表结构的方法主要有一下几种: 1.只复制表结构到新表 ; 或 CREATE TABLE 新表 LIKE 旧表 ; 注意上面两种方式,前一种方式是不会复制时的主键类型和自增方式是 ...

  5. 一篇文章看懂spark 1.3+各版本特性

    Spark 1.6.x的新特性Spark-1.6是Spark-2.0之前的最后一个版本.主要是三个大方面的改进:性能提升,新的 Dataset API 和数据科学功能的扩展.这是社区开发非常重要的一个 ...

  6. Android的Touch系统简介（一

    一.Android touch事件的相关概念 用户的Touch事件被包装成MotionEvent 用户当前的touch事件主要类型有: ACTION_DOWN: 表示用户开始触摸. ACTION_MO ...

  7. Bellman_ford POJ 3259 Wormholes

    Wormholes Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 41728   Accepted: 15325 Descr ...

  8. Day12 - 堡垒机开发

    Python之路,Day12 - 那就做个堡垒机吧   本节内容 项目实战:运维堡垒机开发 前景介绍 到目前为止,很多公司对堡垒机依然不太感冒,其实是没有充分认识到堡垒机在IT管理中的重要作用的,很多 ...

  9. 【开源java游戏框架libgdx专题】-04-接口介绍及生命周期

    在核心项目中包含6大与操作系统交互的接口,每个后端都实现了这6大接口. Application:运行应用程序并通知API的客户端应用程序级别的事件,提供日志记录设施和查询方法,例如,内存使用. Fil ...

  10. C#-高血压生活习惯数据模拟

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace test ...