dom div重合提示

最新推荐文章于 2022-10-29 21:09:00 发布

weixin_33857230

最新推荐文章于 2022-10-29 21:09:00 发布

阅读量77

点赞数

原文链接：http://www.cnblogs.com/mayufo/p/4240918.html

版权

<!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>

转载于:https://www.cnblogs.com/mayufo/p/4240918.html

weixin_33857230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom div重合提示

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style> #div1{ height:100px; width:100px; pos...
复制链接

扫一扫