<!DOCTYPE html>

<html>

<head>

    <meta charset="utf8">

    <title>js拖拽效果</title>

    <style type="text/css">

    #div1 {

        width : 200px;

        height: 200px;

        position: absolute;

        background: #99dd33;

        cursor: move;

    }

    </style>

</head>

<body>

    <div id="div1"></div>

</body>

<script type="text/javascript">

    // js代码

    window.onload=function() {

    var disX = disY = 0;                         // 鼠标距离div的左距离和上距离

    var div1 = document.getElementById("div1");  // 得到div1对象

    // 鼠标按下div1时

    div1.onmousedown = function(e) {

        var evnt = e || event;                   // 得到鼠标事件

        disX = evnt.clientX - div1.offsetLeft;   // 鼠标横坐标 - div1的left

        disY = evnt.clientY - div1.offsetTop;    // 鼠标纵坐标 - div1的top

        // 鼠标移动时

        document.onmousemove = function(e) {

            var evnt = e || event;

            var x = evnt.clientX - disX;

            var y = evnt.clientY - disY;

            var window_width  = document.documentElement.clientWidth  - div1.offsetWidth;

            var window_height = document.documentElement.clientHeight - div1.offsetHeight;

            x = ( x < 0 ) ? 0 : x;                          // 当div1到窗口最左边时

            x = ( x > window_width ) ? window_width : x;    // 当div1到窗口最右边时

            y = ( y < 0 ) ? 0 : y;                          // 当div1到窗口最上边时

            y = ( y > window_height ) ? window_height : y;  // 当div1到窗口最下边时

            div1.style.left = x + "px";

            div1.style.top  = y + "px";

        };

        // 鼠标抬起时

        document.onmouseup = function() {

            document.onmousemove =null;

            document.onmouup = null;

        };

        return false;

    };

};

</script>

</html>

JS拖动浮动DIV的更多相关文章

  1. JS 拖动DIV 需要JQUERY 支持

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

  2. jQuery实现鼠标拖动改变Div高度

    最近项目中需要在DashBoard页面做一个事件通知栏,该通知栏固定位于页面底部,鼠标拖动该DIV实现自动改变高度扩展内容显示区域. 以下是一个设计原型,基于jQuery实现,只实现了拖动效果,没有做 ...

  3. js拖动层

    模仿网易彩票网(http://caipiao.163.com/)的登陆框自己做了一个拖动层,不过有点小问题——在谷歌浏览拖动的时候鼠标状态变成了文字状态(cursor:text;) <!DOCT ...

  4. 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能

    原文:利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能 利用修改div的位置+js对象存储div信息 实现简单的div自定义布局功能1.在界面上添加几个checkbox和一 ...

  5. 电力项目十三--js添加浮动框

    修改page/menu/loading.jsp页面 首先,页面中引入浮动窗样式css <!-- 浮动窗口样式css begin --> <style type="text/ ...

  6. 鼠标拖动改变DIV等网页元素的大小的最佳实践

    1.初次实现 1.1 html代码 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" la ...

  7. js控制使div自动适应居中

    一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DI ...

  8. jquery 拖动改变div大小

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

  9. 基于JQuery的浮动DIV显示提示信息并自动隐藏

    /** * 浮动DIV定时显示提示信息,如操作成功, 失败等 * @param string tips (提示的内容) * @param int height 显示的信息距离浏览器顶部的高度 * @p ...

随机推荐

  1. QML开源游戏

    http://google.github.io/VoltAir/doc/main/html/index.htmlhttp://blog.qt.io/blog/2010/02/26/qt-box2d-i ...

  2. Android Material Design 之 Toolbar的使用

    Material Design是谷歌提出来的最新ui设计规范,我想actionbar大家也许并不陌生,toolbar简单而言可以看做为actionbar的升级版,相比较actionbar而言,tool ...

  3. BASE64URL解析

    BASE64URL是一种在BASE64的基础上编码形成新的加密方式,为了编码能在网络中安全顺畅传输,需要对BASE64进行的编码,特别是互联网中. BASE64URL编码的流程: .明文使用BASE6 ...

  4. UVA 11475 Extend to Palindrome（后缀数组+ST表）

    [题目链接] http://acm.hust.edu.cn/vjudge/problem/27647 [题目大意] 给出一个字符串,要求在其后面添加最少的字符数,使得其成为一个回文串.并输出这个回文串 ...

  5. Linux-NGINX 能否添加P3P头，如何添加。 - 德问:编程社交问答

    Linux-NGINX 能否添加P3P头,如何添加. - 德问:编程社交问答   您的投票让 杜鑫 声誉值增加5分. 支持投票,不仅能让提问用户获得声誉值,让好的问题有更多的曝光,更能帮助社区筛选出好 ...

  6. 【每周一译】愚蠢的指标：Java中使用最多的关键字

    此翻译纯属个人爱好,由于水平所限,翻译质量可能较低.网络上可能存在其它翻译版本,原文地址:http://blog.jooq.org/2013/08/26/silly-metrics-the-most- ...

  7. MySQL性能调优的方法

    第一种方法 1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的 性能,我们可以将表中字 ...

  8. block 解析 - 内存

    block结构体相应的也有一个成员引用,这样会增加对局部变量的 _para1引用,在Block销毁的时候引用就释放掉了 我们了解到了用__block修饰的变量,可以在block内部修改,__block ...

  9. matlab画甘特图

    近期为发小论文一直在研究作业调度问题,好不easy把数据搞出来了,结果又被画甘特图给难住了,查了各种资料.anygantt,highchart.Jfree chart等都试了,效果都不咋好.无意中留意 ...

  10. 通过配置Tomcat，让Android真机通过局域网访问PC的文件

    在 Tomcat 根目录,找到conf\server.xml文件. 1.打开server.xml查找修改端口为8080端口: <Connector port="8080" p ...