<!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. （DT系列二）device tree的书写规范

    devicetree的书写规范 下面从节点,属性,reg,ranges,中断控制器等几个方面叙述devicetree的书写规范. 1,dts的基本元素:节点 .dts(或者其include的.dtsi ...

  2. 1 storm基本概念 + storm编程规范及demo编写

    本博文的主要内容有 .Storm的单机模式安装 .Storm的分布式安装(3节点)   .No space left on device .storm工程的eclipse的java编写 http:// ...

  3. c#+ArcEngine中的IGroupLayer的用法

    转自羊子雄起原文c#+ArcEngine中的IGroupLayer的用法 在AE开发中,我们知道axMapControl.LayerCount能获取图层的数量,但是这种方法不能获取到图层组里面的图层, ...

  4. js弹出层插件 -- weebox

    1.引入文件: 使用前需包含以下jquery.js.bgiframe.js.weebox.js.wee.css文件 2.基本用法举例如下: <script type="text/jav ...

  5. 20169210《Linux内核原理与分析》第十周作业

    第一部分:实验 进程的调度时机与进程的切换 操作系统原理中介绍了大量进程调度算法,这些算法从实现的角度看仅仅是从运行队列中选择一个新进程,选择的过程中运用了不同的策略而已. 对于理解操作系统的工作机制 ...

  6. SQL语法集锦一：显示每个类别最新更新的数据

    本文转载http://www.cnblogs.com/lxblog/archive/2012/09/28/2707504.html (1)显示每个类别最新更新的数据 在项目中经常遇到求每个类别最新显示 ...

  7. [AngularJS] Error: $location:nobase

    In AngularJS 1.3.x, using $locationProvider.html5Mode(ture), will cause a Error:$location:nobase err ...

  8. android 67 生成和解析xml

    生成xml: package com.itheima.createxml; import java.io.File; import java.io.FileNotFoundException; imp ...

  9. C#生成XML的三种途径

    C#生成XML的三种途径 为了全面,这里都将XML保存到文件中,有三种生成XML的方式: 1.我认为是最原始,最基本的一种:利用XmlDocument向一个XML文件里写节点,然后再利用XmlDocu ...

  10. Cocos2d的特性

    从本质上说,Cocos2d是一个图形引擎,封装了复杂的图形接口,通过抽象出精灵.动作等概念,降低了游戏开发难度,简化了开发过程.Cocos2d-x为保证游戏能方便地移植到不同平台上,又在此基础上做了很 ...