<!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. java list 的 四种遍历方式

    在java中遍历一个list对象的方法主要有以下四种: 1. For Loop —— 普通for循环 2. Advanced For Loop —— 高级for循环 3. Iterator Loop ...

  2. ios 中生成二维码和相册中识别二维码

    iOS 使用CIDetector扫描相册二维码.原生扫描 原生扫描 iOS7之后,AVFoundation让我们终于可以使用原生扫描进行扫码了(二维码与条码皆可)AVFoundation可以让我们从设 ...

  3. hdu 4741 Save Labman No.004 [2013年杭州ACM网络赛]

    // Time 234 ms; Memory 244 K #include<iostream> #include<cstdio> #include<cmath> u ...

  4. cc150:实现一个算法来删除单链表中间的一个结点，仅仅给出指向那个结点的指针

    实现一个算法来删除单链表中间的一个结点,仅仅给出指向那个结点的指针. 样例: 输入:指向链表a->b->c->d->e中结点c的指针 结果:不须要返回什么,得到一个新链表:a- ...

  5. Windows API中几个函数的总结

    [DllImport("User32.dll", EntryPoint = "FindWindow")] public static extern IntPtr ...

  6. 【原创】ASP.NET Web开发，实现打印Log日志，步骤详解

    添加Log需要四步: 一.引用log4net.dll,详见附件:http://pan.baidu.com/s/1c0hab2g 二.项目根目录下,添加 log4net.xml <?xml ver ...

  7. sql 查询所有数据库、表名、表字段总结

    ms sql server 1.查询所有表select [id], [name] from [sysobjects] where [type] = 'u' order by [name]2.查询所有数 ...

  8. sql update 触发器 可获得被update的行的信息

    类型:转载   sql update 触发器 可获得被update的行的信息,需要的朋友可以参考下. 复制代码 代码如下: create trigger TgName on tb for update ...

  9. HtmlAgilityPack --解析Html源码

    最近项目需要从网络上抓取一下数据解析Html源码,奈何正则表达式难写,于是网上搜索找到了“ HtmlAgilityPack”类库,敏捷开发,果然效率非同寻常. 在此做笔记,写下心得,顺便给自己总结一下 ...

  10. 内置的材质包含文件 .cginc

    Unity中包含几个文件,可以用于你的Shader程序,里面包含了预定义的变量和辅助函数.使用它需要用 #include指令 CGPROGRAM // ... #include "Unity ...