<!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. javascript排序 查找算法大全

    在pptv的实习结束了, 忙着找工作的事,顺便把数据结构的那本书重新复习了一遍.为了加深印象,特意把里面的常用的排序.查找算法用js写了一遍 具体的实例在我的github上,大家可以访问的: http ...

  2. JAVA基础英语单词表（下）

    quantity                     / 'kwɔntiti /                    量,数量 query                             ...

  3. engine中调整Element的上下显示顺序(遮盖)

    pGraphicsContainer.AddElement(pElement, 0); Engine中IGraphicsContainer类似于栈,加Element时,默认加到第一个,所以会将之前加的 ...

  4. sublime 汉化及注册

    首先安装 package control https://packagecontrol.io/installation 网站上面有详细说明 安装以后快捷键 ctrl +shift+p   输入ip  ...

  5. PowerShell自定义对象

    前面的性能高 使用[pscustomobject][ordered]强制类型转换 [pscustomobject][ordered]@{Name= 'Boe'Number = 1ID = 007} 使 ...

  6. strcmp函数和strcpy函数

    (一)strcmp函数 strcmp函数是比較两个字符串的大小,返回比較的结果.一般形式是: i=strcmp(字符串,字符串); 当中,字符串1.字符串2均可为字符串常量或变量:i   是用于存放比 ...

  7. cf 85 E. Petya and Spiders

    http://codeforces.com/contest/112/problem/E 轮廓线dp.每一个格子中的蜘蛛选一个去向.终于,使每一个蜘蛛都有一个去向,同一时候保证有蜘蛛的格子最少.须要用4 ...

  8. Android中应用程序如何获得系统签名权限

    有些库的使用条件比较苛刻,要求同一签名的程序才可以获得访问权.此时即便是在AndroidManifest.xml中添加了相应的permission,依旧会得到没有xx访问权限的问题.比如android ...

  9. android83 Activity的生命周期,启动模式,返回时传递数据

    #Android四大组件 * Activity * BroadCastReceiver * Service * ContentProvider #Activity生命周期 * oncreate:Act ...

  10. NDK开发之数组操作

    JNI把Java数组当作引用类型来处理,JNI提供了必要的函数来访问和处理Java数组. 下面一个一个来看. 1.创建数组 我们可以使用NewArray函数在原生代码中创建数组实例,其中可以是Int. ...