<!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. 暴力求解——UVA 572(简单的dfs)

    Description The GeoSurvComp geologic survey company is responsible for detecting underground oil dep ...

  2. Golang下通过syscall调用win32的dll（calling Windows DLLs from Go ）

    很多同学比如我虽然很喜欢golang,但是还是需要调用很多遗留项目或者其他优秀的开源项目,这时怎么办呢?我们想到的方法是用package里的syscall结合cgo 注意此处有坑: 在我调试时显示no ...

  3. ural 1136. Parliament

    题目链接:http://acm.timus.ru/problem.aspx?space=1&num=1136 题目描述:给定一个按照(左子树-右子树-根)(即先序)遍历序列的树,求其按照 右子 ...

  4. 理解Android的startservice和bindservice(转)

    一.首先,让我们确认下什么是service? service就是android系统中的服务,它有这么几个特点:它无法与用户直接进行交互.它必须由用户或者其他程序显式的启动.它的优先级比较高,它比处于前 ...

  5. [深入React] 1. 开发环境搭建

    React环境其实很简单(不兼容ie8): <!DOCTYPE html> <html> <head> <title>React</title&g ...

  6. [Angular 2] Passing data to components with 'properties'

    Besides @Input(), we can also use properties on the @Component, to pass the data. import {Component, ...

  7. [转] 消息系统该Push/Pull模式分析

    信息推拉技术简介 “智能信息推拉(IIPP)技术”是在网上信息获取技术中加入了智能成份,从而有助于用户在海量信息中高效.及时地获取最新信息,提高了信 息系统主动信息服务的能力.如果引入基于IIPP的主 ...

  8. iOS 如何优雅的处理“回调地狱Callback hell”(一) (上)

    前言 最近看了一些Swift关于封装异步操作过程的文章,比如RxSwift,RAC等等,因为回调地狱我自己也写过,很有感触,于是就翻出了Promise来研究学习一下.现将自己的一些收获分享一下,有错误 ...

  9. GridView禁止上下滚动的方法

    通常情况下,我们使用GridView来完成类似表格的布局,这种布局,我们只需要设置列数,会自动根据适配器的数据进行适配,非常灵活. GridView其实就是一个容器.允许向其内部添加控件,通常情况下, ...

  10. Another app is currently holding the yum lock; waiting for it to exit... 怎么解决

    Another app is currently holding the yum lock; waiting for it to exit... 怎么解决 这个问题说明你的程序yum程序正在运行,必须 ...