<!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. DFS 10.1.5.253 1501

    #include <iostream> using namespace std; #define N 20 int a[N][N],m[N],bz[N],n,s; void dfs(int ...

  2. angularJS测试一 Karma Jasmine Mock

    AngularJS测试 一 测试工具 1.NodeJS领域:Jasmine做单元测试,Karma自动化完成单元测试,Grunt启动Karma统一项目管理,Yeoman最后封装成一个项目原型模板,npm ...

  3. Spring Boot(spring mvc升级版)

    周末挤出了一些时间,学了点东西,总结了一下,可能还有自己理解不到位的地方,希望大家一起交流学习,好东西要大家一起分享嘛~.时间有点紧张,所以样式没有来及做很好的调整,大家就凑活着看吧. Spring ...

  4. Leetcode - Reverse Words

    比起POJ弱爆了一题,从后往前扫描一遍,O(n)时间,仅仅要注意各种极端情况就可以,不明确通过率为什么仅仅有13%. #include<iostream> #include<stri ...

  5. Web站点架构设计考虑的因素

    转自http://blog.csdn.net/moshengtan/article/details/8990052 1    Web负载均衡 1.1 - 使用商业硬件实现 最经常使用的F5 与citr ...

  6. zoj 3537 Cake(区间dp)

    这道题目是经典的凸包的最优三角剖分,不过这个题目给的可能不是凸包,所以要提前判定一下是否为凸包,如果是凸包的话才能继续剖分,dp[i][j]表示已经排好序的凸包上的点i->j上被分割成一个个小三 ...

  7. python-property、docstring--笔记

    已经有人总结的非常详细,而且写得不错,就直接贴过来用了 property作为装饰器函数,负责把一个方法变成属性调用的 廖雪峰关于property的讲解 http://www.liaoxuefeng.c ...

  8. JS获取客户端的窗口大小

    function getClientSize() {    var c = window,    b = document,    a = b.documentElement;    if (c.in ...

  9. （转）DEDECMS 如何让栏目外部链接在新窗口中打开

    近遇到一个问题,就是dedecms的导航,是用外部链接的,但是原窗口打开不好看,新窗口打开好点.OK,放狗... 1. 查找模板中的head.htm将<li><a href='[fi ...

  10. PT与PX，em(%)区别

    字体大小的设置单位,常用的有2种:px.pt.这两个有什么区别呢?先搞清基本概念:px就是表示pixel,像素,是屏幕上显示数据的最基本的点:pt就是point,是印刷行业常用单位,等于1/72英寸. ...