<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>移动框练习</title>

    <style type = "text/css">

        #big{width: 300px;height: 200px;position: absolute;top: 200px;left: 300px;background: #ccc;}

        h1{width: 200px;height: 50px;line-height: 50px;text-align: center;background: orange;margin: 0 auto; cursor: move;}

    </style>

</head>

<body>

    <div id="big">

        <h1 class="titl"></h1>

    </div>

    <script type="text/javascript">

        //通过父元素获取到指定想要获取的元素。

        function getClass(clsName,parent){

            var oParent = parent?document.getElementById(parent):document;

            var oH1 = oParent.getElementsByClassName(clsName)[0];

            return oH1;

        }

        window.onload = drag;

        //给h1添加按住的事件。

        function drag(){

            var h1Node = getClass("titl","big");

            h1Node.onmousedown = fnDown;

        }

        //通过函数来获取指针的位置。

        function fnDown(event) {

            event = event || window.event;

            var oDiv = document.getElementById("big"),

                //光标按下时光标和面板之间的距离。

                disX = event.clientX-oDiv.offsetLeft;

                disY = event.clientY-oDiv.offsetTop;

            document.onmousemove = function(event) {

                event = event || window.event;

                fnMove(event,disX,disY);

            }

            document.onmouseup = function(){

                document.onmousemove = null;

            }

        }

        function fnMove(e,posX,posY) {

            var oDiv = document.getElementById("big"),

                l = e.clientX-posX,

                t = e.clientY-posY,

                winW = document.documentElement.clientWidth || document.body.clientWidth,

                winH = document.documentElement.clientHeight || document.body.clientHeight,

                maxW = winW-oDiv.offsetWidth,

                maxH = winH-oDiv.offsetHeight;

            if (l<0) {

                l=10;

            } else if(l>maxW){

                l=maxW;

            }

            if (t<0) {

                t=10;

            } else if(t>maxH){

                t=maxH;

            }

            oDiv.style.left = l+"px";

            oDiv.style.top = t+"px";

        }

    </script>

</body>

</html>

关于移动div的具体实现（js）的更多相关文章

  1. 动态添加div及对应的js、css文件

    动态添加div及对应的js.css文件 在近期的项目开发中需要在首页中添加很多面板型的div,直接加载代码显得很繁琐,于是利用js封装一个动态添加div及其对应css文件和js文件的方法供大家参考使用 ...

  2. making a resizable div effect in vanilla js

    making a resizable div effect in vanilla js scroll image compare <!DOCTYPE html> <html lang ...

  3. js文件需要jsp页面中的div时，此js文件必须在div之后才能获得值，否则获取不到

    js文件需要jsp页面中的div时,此js文件必须在div之后才能获得值,否则获取不到 2.图2的内容为directionkey.js的内容

  4. 页面的div中有滚动条，js实现刷新页面后回到记录时滚动条的位置

    当div中绑定数据,给它一个属性overflow-y: scroll,添加长度大小,使其能够出现滚动条:每次刷新的时候滚动条总是会出现在最上方,这使我很头疼,经过查阅网上资料,返现两种方法可行.如下: ...

  5. jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案

    1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...

  6. 页面DIV弹出层 JS原生脚本

    <script type="text/javascript"> /*         * 弹出DIV层         */ function showDiv() { ...

  7. js 实现div模块的截图并下载功能（可制作长图）

    当需要实现html页面部分模块截图并具有保存图片功能时,前台直接生成截图并下载会方便的多.多的不说,直接看代码首先我们需要引入2个js文件: <script type="text/ja ...

  8. JaveWeb 公司项目（7）----- 通过JS动态生成DIV

    Web网页项目的数据表格功能已经大体完成,下面是另一个主要功能,在线视频的显示 目前我做的项目是渔政监控方面,在之前C#的版本中已经实现了摄像头的在线监控,用的海康封装好的SDK,目前需要做的工作是在 ...

  9. js改变div高度

    用bootsrap响应式布局的时候,遇到个很恶心的问题:左边栏很短很难看!! 于是,想用js来自动改变左边的高度,没成功!!原来是设置的时候,没加单位,坑爹了. 参考:http://blog.sina ...

  10. js循环复制一个div

    <html> <head> <title>Test of cloneNode Method</title> <script type=" ...

随机推荐

  1. GCC基本知识

    掌握下面的对GCC会有一个比较清晰的大致的了解: 不经意间,GCC已发展到了4.3的版本,尽管在软件开发社区之外乏人闻问,但因为GCC在几乎所有开源软件和自由软件中都会用到,因此它的编译性能的涨落会直 ...

  2. hdoj 4738 Caocao's Bridges【双连通分量求桥】

    Caocao's Bridges Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  3. java的单例设计模式

    java的单例设计模式包括:饿汉设计模式和懒汉设计模式: 步骤: 1.创建一个对象把他设置为私有的成员变量,保证唯一 2.私有构造方法,防止new一个对象. 3.定义一个公开的静态方法,返回第一步创建 ...

  4. MySQL数据库事务剖析

    MySQL数据库事务剖析 事务就是一组原子性的SQL查询,是一个独立的执行单元.事务内的语句,要么全部执行成功,要么全部执行失败. 1.事务的标准特征 一个运行良好的事务处理系统,必须具备原子性.一致 ...

  5. macos下使用rvm管理ruby版本和rails版本

    1. 安装rvm curl -L https://get.rvm.io | bash -s stable 查看rvm 版本 2. 安装ruby rvm install 2.3.1 查看ruby 版本 ...

  6. iOS 利用Socket UDP协议广播机制的实现

    1.前言 什么是UDP协议广播机制? 举一个例. 比如在一群人群中,一个人要找张三,于是你向人群里大喊一声(广播):"谁是张三" 假设它是张三,它就会回应你.在网络中也是一样的. ...

  7. [PHP] find ascii code in string

    if (strpos($data ,chr(0x95)) !== false) { echo 'true'; }else{ echo "false"; }

  8. oracle5

    oracle中事务处理 什么是事务 事务用于保证数据的一致性,它由一组相关的dml语句组成,该组的dml(数据操作语言:增删改,没有查询)语句要么全部成功,要么全部失败. 如:网上转账就是典型的要用事 ...

  9. tcpreplay安装使用经验

    tcpreplay安装使用经验   #Author: ypguo#Data: 2010.4.23#Version:  1.2 增加了修改VLAN tag内容.                 1.1 ...

  10. PHP内核探索之变量（1）变量的容器-Zval

    http://blog.csdn.net/ohmygirl/article/details/41542445