<!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. VS2012生成绿色版程序的方法

    方法就是在工程属性里设置: 配置属性-〉常规-〉项目默认值-〉MFC的使用-〉在静态库中使用MFC,见下图 之后重新编译即可.

  2. Codeforces 700B Connecting Universities（树形DP）

    [题目链接] http://codeforces.com/problemset/problem/700/B [题目大意] 给出 一棵n个节点的树, 现在在这棵树上选取2*k个点,两两配对,使得其配对的 ...

  3. SpringMVC入门一:helloWorld

    玩了一下SpringMVC, 感觉挺清爽的 好像没有struts那么臃肿( 可能是高级的东西我还不会用 哈 ) 例子中一共有俩方法: 一个Controller直接返回字串的方法, 另一个通过Dao层返 ...

  4. Linux c 信号—pause、sigsuspend 的相同于区别

    pause函数:      功能:让进程暂停直到信号出现 #include<unistd.h> intpause(); 函数说明:pause()会令目前的进程暂停(进入睡眠状态),直至信号 ...

  5. 合作开发，导入MyEclipse项目报错问题

    因工作原因,同事将他的java项目交接给了我.和平时的交接一样.他把他最新的源代码,打成压缩包,发给我.我解压后,使用myeclipse开发工具,通过导入,将项目导入到我的开发工具中,这个时候有一个问 ...

  6. Tomcat 的context.xml

    1. 在tomcat 5.5之前: --------------------------------------------------------------- Context体如今/conf/se ...

  7. HDU 1976 prime path

    题意:给你2个数n m.从n变成m最少须要改变多少次. 当中: 1.n  m  都是4位数 2.每次仅仅能改变n的一个位数(个位.十位.百位.千位),且每次改变后后的新数为素数 思路:搜索的变形题,这 ...

  8. html网页编码问题

    之前碰到过一些html编码乱码问题,都理解的模模糊糊,问了别人解释的也是模模糊糊.近期要做前端这个问题研究了下仅仅须要两句话就能非常清楚的解释了(之前问的那些人是不是自己都没理解非常郁闷.) < ...

  9. 有关VS2008制作安装包时遇到的问题详解

    公司最近要做一个安装包,然而在做的时候遇到好多问题,这里我一一记录下来 一.先用VS2008建一个Setup项目,添加你需要打包的文件,这里我就不具体介绍了,网上一搜都好多,这时我们一般都需要在安装前 ...

  10. A Byte of Python 笔记（7）数据结构：列表、元组、字典，序列

    第9章 数据结构 数据结构,即可以处理一些数据的结构.或者说,它们是用来存储一组相关数据的. python 有三种内建的数据结构--列表.元组和字典. list = ['item1', 'item2' ...