<!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. Python的函数式编程-传入函数、排序算法、函数作为返回值、匿名函数、偏函数、装饰器

    函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计的基本单元. ...

  2. Java学习感受

    一个暑假,两本书,让我了解到了Java的神奇美妙,这个工具的年龄跟我一样大,然而日久弥新,随着电脑技术科学家,工程师的开发,Java的功能越来越完善.学习的时间不长,但我比较着学习,把Java跟C.C ...

  3. coco2dx 精灵类

    CCSize size = CCDirector::sharedDirector()->getWinSize(); CCSprite *bg = CCSprite::create("H ...

  4. Java_Web 连接池

    对于共享资源,有一个很著名的设计模式:资源池(Resource Pool).该模式正是为了解决资源的频繁分配﹑释放所造成的问题.为解决我们的问题,可以采用数据库连接池技术.数据库连接池的基本思想就是为 ...

  5. HTML5的渐变色 渐变的两种类型 createLinearGradient 和createRadialGradient

    今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...

  6. C#使用Sockets操作FTP【转载】

    using System; using System.Collections; using System.IO; using System.Net; using System.Net.Sockets; ...

  7. 知名IT企业待遇一览表

    115家IT公司待遇一览表       作者是西电通院2013届毕业硕士,依据今年找工作的情况以及身边同学的汇总,总结各大公司的待遇例如以下,吐血奉献,公司比較全.下面绝对是各大公司2013届校招的数 ...

  8. linux 0.11 源码学习+ IO模型

    http://www.cnblogs.com/Fredric-2013/category/696688.html

  9. 浅谈Android自定义锁屏页的发车姿势

    一.为什么需要自定义锁屏页 锁屏作为一种黑白屏时代就存在的手机功能,至今仍发挥着巨大作用,特别是触屏时代的到来,锁屏的功用被发挥到了极致.多少人曾经在无聊的时候每隔几分钟划开锁屏再关上,孜孜不倦,其酸 ...

  10. runtime重写description方法打印model属性和值

    在开发过程中, 往往会有很多的model来装载属性. 而在开发期间经常会进行调试查看model里的属性值是否正确. 那么问题来了, 在objective-c里使用NSLog("%@" ...