<!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. 借助 AOP 为 Java Web 应用记录性能数据

    作为开发者,应用的性能始终是我们最感兴趣的话题之一.然而,不是所有的开发者都对自己维护的应用的性能有所了解,更别说快速定位性能瓶颈并实施解决方案了. 今年北京 Velocity 的赞助商大多从事 AP ...

  2. UILabel字体加粗等属性和特效

    /* Accessing the Text Attributes text  property font  property textColor  property textAlignment  pr ...

  3. flashback drop（2015-2-3学习日记）

    知识面是由知识点组成的,你在研究某一个知识点的时候常常会遇到另一个知识点,然后你去研究那个知识点,又会带出更多的知识点,最终组成了知识面. 今天在看书的时候看到一个删除表的语句: DROP TABLE ...

  4. docker学习资料整理(持续更新中..)

    docker最近可以说火得一踏糊涂,跟 51大神在交流技术的时候这个东西会多次被提到,当我们还玩vm+linux/freebsd的时候,人家已经上升到更高层次了,这就是差距,感觉好高大上的样子,技术之 ...

  5. Android项目Tab类型主界面大总结 Fragment+TabPageIndicator+ViewPager

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/24740977 Android如今实现Tab类型的界面方式越来越多,今天就把常见的 ...

  6. 使用Inputstream读取文件

    在java中,能够使用InputStream对文件进行读取,就是字节流的输入.当读取文件内容进程序时,须要使用一个byte数组来进行存储,如此会有例如以下两个问题: 1.怎样建立合适大小的byte数组 ...

  7. eclipse 配置Maven问题解决办法：新建maven工程时报错：Could not resolve archetype org.apache.maven.archetypes .

    此文乃本作者配置maven,被其折磨n天,究极解决方案,好文要顶啊.欢迎致电: zhe-jiang.he@hp.com 首先各maven.archetypes下载地址: http://mirrors. ...

  8. 实现FTP断点续传

    应用需求: 网盘开发工作逐步进入各部分的整合阶段,当用户在客户端修改或新增加一个文件时,该文件要同步上传到服务器端对应的用户目录下,因此针对数据传输(即:上传.下载)这一块现在既定了三种传输方式,即: ...

  9. 使用Broadcast实现android组件之间的通信 分类： android 学习笔记 2015-07-09 14:16 110人阅读 评论(0) 收藏

    android组件之间的通信有多种实现方式,Broadcast就是其中一种.在activity和fragment之间的通信,broadcast用的更多本文以一个activity为例. 效果如图: 布局 ...

  10. CentOS7安装vim7.4

    卸载自带vim yum remove vim-enhanced vim-common 下载vim包 wget ftp://ftp.vim.org/pub/vim/unix/vim-7.4.tar.bz ...