<!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. ios学习Day3

    bool 数据类型 #define TRUE 1// #define FALAE 0 #define BOOL int Bool flag=1; bool型 实质上是 int型 c89没有提供 c99 ...

  2. compass安装教程

    *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...

  3. BZOJ 2561: 最小生成树(最小割)

    U,V能在最小(大)生成树上,当且仅当权值比它小(大)的边无法连通U,V. 两次最小割就OK了. --------------------------------------------------- ...

  4. java freemark生成word文档

    1.下载freemarker-2.3.19.jar 2.把要填充的内容用  ${title},${no}代替 3.用word 打开,保存为2003xml 4.打开生成xml文件,看下有没有把表达式  ...

  5. 10条PHP编程习惯

    过去的几周对我来说是一段相当复杂的经历.我们公司进行了大裁员,我是其中之一,但却体验到了其中的乐 趣.我从来没有被开除过,所以很难不去想得太多.我开始浏览招聘板块,一个全职PHP程序员的职位很吸引人, ...

  6. activemq在windows下启动报错，闪退问题

    查验了网上各种方法,都没搞定,最后楼主决定按照linux的解决套路来,把windows计算机名称改为纯英文字母,原计算机名:lee_pc,修改后为leepc,然后重启电脑,再重新运行activemq. ...

  7. Windows Azure HDInsight 支持预览版 Hadoop 2.2 群集

     Windows Azure HDInsight 支持预览版 Hadoop 2.2 群集 继去年 10 月推出 Windows Azure HDInsight 之后,我们宣布 Windows Az ...

  8. HDU 2722 Here We Go(relians) Again

    最短路,建图太麻烦,略过…… #include <cstdio> #include <cstring> #include <queue> const int INF ...

  9. Libev学习笔记4

    这一节首先分析Libev的定时器部分,然后分析signal部分. 对定时器的使用主要有两个函数: ev_timer_init (&timeout_watcher, timeout_cb, .) ...

  10. Redis 命令总结

    Redis命令总结   连接操作相关的命令 quit:关闭连接(connection) auth:简单密码认证 持久化 save:将数据同步保存到磁盘 bgsave:将数据异步保存到磁盘 lastsa ...