<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>无标题文档</title>

<style>

    #div1{

        height:100px;

        width:100px;

        position:absolute;

        background:red;

        top:200px;

        left:400px;

        }

    #div2{

        height:100px;

        width:100px;

        position:absolute;

        background:pink;

        z-index:2;

        text-align:center;

        line-height:100px;

        color:#fff;

        }

</style>

<script>

window.onload = function ()

{

    var odiv1 = document.getElementById('div1');

    var odiv2 = document.getElementById('div2');

    odiv2.onmousedown = function(ev)

    {

        var ev = ev || event;

        var dix = ev.clientX - this.offsetLeft;

        var diy = ev.clientY - this.offsetTop;

        document.onmousemove = function (ev)

        {

            var T = ev.clientY - diy;

            var L = ev.clientX - dix;

            if(T < 0)

            {

                T = 0;

            }else if( T > document.documentElement.clientHeight - odiv2.offsetHeight)

            {

                T = document.documentElement.clientHeight - odiv2.offsetHeight;

            }

            if(L < 0)

            {

                L = 0;

            }else if( L > document.documentElement.clientWidth - odiv2.offsetWidth)

            {

                L = document.documentElement.clientWidth - odiv2.offsetWidth;

            }

            odiv2.style.top = T + 'px';

            odiv2.style.left = L + 'px';

            document.title = T + ':' + odiv1.offsetTop + '||' + L + ':' + odiv2.offsetLeft;

            if(T == odiv1.offsetTop && L == odiv1.offsetLeft)

            {

                alert('我们重合了')

                document.onmousemove = document.onmousedown = null;

                if(odiv2.releaseCapture)

                {

                    odiv2.releaseCapture();

                }

            }

        };

        document.onmouseup = function ()

        {

            document.onmousemove = document.onmousedown = null;

            if(odiv2.releaseCapture)

            {

                odiv2.releaseCapture();

            }

        };

        return false;

    }

};

</script>

</head>

<body>

<div id="div1"></div>

<div id="div2">让我们重合</div>

</body>

</html>

dom div重合提示的更多相关文章

  1. Jquery hover鼠标经过时弹出div动态提示语

    一.效果图 二.需求描述 1.鼠标经过table每一行时,弹出div动态提示语: 2.div弹出层的位置随鼠标位置的变化而变化: 3.鼠标离开table或获取的动态提示语为空时,div弹出层消失. 下 ...

  2. ASP.NET div信息提示框显示几秒后隐藏

    今天在旧系统中,用户要求,要把一个javascript alert的信息提示,改为Div tag来显示,它在显示时,仅显示几秒,然后隐藏,这样无需用户去点击alert信息框的确定或是关闭铵钮. 下面I ...

  3. dom div移动解决停顿问题

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. DOM 事件深入浅出（一）

    在项目开发时,我们时常需要考虑用户在使用产品时产生的各种各样的交互事件,比如鼠标点击事件.敲击键盘事件等.这样的事件行为都是前端DOM事件的组成部分,不同的DOM事件会有不同的触发条件和触发效果.本文 ...

  5. javascript针对DOM的应用

    所谓针对DOM的应用.也就我这里只教大家用javascript操作页面中dom元素做交互.我相信可能大部分人来这里学javascript主要还是想用这个结合页面中的DOM元素做一些实际有用的交互效果. ...

  6. JavaScript学习总结【5】、JS DOM

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...

  7. 从template到DOM(Vue.js源码角度看内部运行机制)

    写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...

  8. Echarts-K线图提示框改头换面

    工作: 使用Hbuilder建web工程,加入echarts相关库,根据需要更改K线图及其的提示样式,去除默认提示,使用异步加载echarts的数据,数据格式为json. 需要注意的K线图和5日均线, ...

  9. javascript教程2:---DOM操作

    1.DOM 简介 当页面加载时,浏览器会创建页面的文档对象模型(Document Object Model).文档对象模型定义访问和处理 HTML 文档的标准方法.DOM 将 HTML 文档呈现为带有 ...

随机推荐

  1. php关于return的关键字

    使用return关键字可以使函数返回值,可以返回包括数组和对象的任意类型,如果省略了 return,则默认返回值为 NULL. function add($a) { return $a+1; } $b ...

  2. 《OD大数据实战》MongoDB环境搭建

    一.MongonDB环境搭建 1. 下载 https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-3.0.6.tgz 2. 解压 tar -zxvf ...

  3. Maven3路程（五）用Maven创建Hibernate项目

    本文将用Maven3.Hibernate3.6.Oracle10g整合,作为例子. 环境清单: 1.Maven3.0.5 2.Hibernate3.6.5 Final 3.JDK1.7.0.11 4. ...

  4. 【笨嘴拙舌WINDOWS】BMP图片浏览器

    要将文件显示成图片这其中需要经过 1.将磁盘文件内容读取到内存: 2.将文件对应内存里包含的像素为以及像素信息转化为显示驱动器能理解的格式: 3.将转化过后的内存送到显卡的缓存区 4.显示器读取缓存现 ...

  5. hdfs工作原理

    一.NameNode和DataNode (1)NameNode NameNode的作用是管理文件目录结构,是管理数据节点的.NameNode维护两套数据:一套是文件目录与数据块之间的关系,另一套是数据 ...

  6. UVa 136 Ugly Numbers【优先队列】

    题意:给出丑数的定义,不能被除2,3,5以外的素数整除的的数称为丑数. 和杭电的那一题丑数一样--这里学的紫书上的用优先队列来做. 用已知的丑数去生成新的丑数,利用优先队列的能够每次取出当前最小的丑数 ...

  7. A1486. 树（王康宁）

    题目:http://www.tsinsen.com/A1486 题解: 其实看到和路径有关的就应该想到点分治. 我们找出重心之后遍历每一棵子树得到它的 { x=经过特殊点的个数,y=到rt的异或和} ...

  8. HDU 1015 Safecracker

    解题思路:这题相当诡异,样例没过,交了,A了,呵呵,因为理论上是可以通过的,所以 我交了一发,然后就神奇的过了.首先要看懂题目. #include<cstdio> #include< ...

  9. 【解题报告】zju-1145 Dreisam Equations

    原题地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=145 题目大意:在给定的等式右边数字之间加上加.减.乘运算符,使等式成 ...

  10. jquery再学习（1）

    一:jquery对象和js的dom对象相互转化 html代码 <ul> <li class="sxf" name="dd">第一< ...