拖拽+重叠+虚线框（解决移动文字复制问题）

最新推荐文章于 2021-05-31 01:22:38 发布

森_

最新推荐文章于 2021-05-31 01:22:38 发布

阅读量1k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_33075157/article/details/54599511

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="utf-8">  
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
<title>拖拽+重叠+虚线框（解决移动文字复制问题）</title>  
<meta name="description" content="">  
<meta name="keywords" content="">  
	<script src="jquery-1.12.3.min.js"></script>
<style>  
    *{margin:0; padding:0;}  
    .f-wrap{width: 1000px; margin:10px auto;}  
    .box{ position: absolute; top:0; left:40%; width: 150px; height: 150px; color:#fff; text-align: center; line-height: 144px; font-size:26px; background-color: green; cursor: move;}  
    .box1{ background-color: purple; top:200px; left:40%;}  
    .newDiv{border:1px dotted red; position: absolute;}  
</style>  
<script>  
    window.onload = function(){  
        Drag('box');  
        Drag('box1');  
    }  
  
    function Drag(id){  
        var oDiv = document.getElementById(id);  
        var oDiv1 = document.getElementById('box');  
        var oDiv2 = document.getElementById('box1');  
        oDiv.onmousedown = function(e){  
            var e = e||event;  
            var disX = e.clientX - oDiv.offsetLeft;  
            var disY = e.clientY - oDiv.offsetTop;  
  
            // 创建虚线框  
            var newDiv = document.createElement('div');  
            newDiv.className = 'newDiv';  
            newDiv.style.width = oDiv.offsetWidth-2+'px';  
            newDiv.style.height = oDiv.offsetHeight-2 +'px';  
            newDiv.style.left = oDiv.offsetLeft +'px';  
            newDiv.style.top = oDiv.offsetTop +'px';  
            document.body.appendChild(newDiv);  
  
            oDiv.style.filter='alpha(opacity=30)';  
            oDiv.style.opacity=0.3;  
  
            if(oDiv.setCapture){  
                newDiv.onmousemove = fnMove;  
                newDiv.onmouseup = fnUp;  
                newDiv.setCapture();  
            }else{  
                document.onmousemove = fnMove;  
                document.onmouseup = fnUp;  
            }  
  
            function fnMove(e){  
                var e = e||event,  
                // 鼠标位置距离物体的左侧和上侧的距离  
                    l = e.clientX - disX,  
                    t = e.clientY - disY;  
                    scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft,  
                    scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
                var o1 = {  
                        l:newDiv.offsetLeft,  
                        r:newDiv.offsetLeft + newDiv.offsetWidth,  
                        t:newDiv.offsetTop,  
                        b:newDiv.offsetTop + newDiv.offsetHeight  
                    },  
                    o2 = {  
                        l:oDiv2.offsetLeft,  
                        r:oDiv2.offsetLeft + oDiv2.offsetWidth,  
                        t:oDiv2.offsetTop,  
                        b:oDiv2.offsetTop + oDiv2.offsetHeight  
                    };  
                if(o1.r < o2.l || o1.l > o2.r || o1.b < o2.t || o1.t > o2.b){  
                    oDiv2.style.backgroundColor = 'purple';  
                }else{  
                    oDiv2.style.backgroundColor = 'pink';  
                }  
  
                // 拖拽范围限定  
                if(l<=10){  
                    l=0;  
                }else if(l>=document.documentElement.clientWidth + scrollLeft - newDiv.offsetWidth - 10){  
                    l=document.documentElement.clientWidth +scrollLeft - newDiv.offsetWidth;  
                }  
                if(t<=10){  
                    t=0;  
                }else if(t>=document.documentElement.clientHeight + scrollTop - newDiv.offsetHeight - 10){  
                    t=document.documentElement.clientHeight +scrollTop - newDiv.offsetHeight;  
                }  
                oDiv.style.left = l+'px';  
                oDiv.style.top = t+'px';  
  
            }  
            function fnUp(){  
                this.onmousemove = null;  
                this.onmouseup = null;  
                if(this.releaseCapture){  
                    this.releaseCapture();  
                }  
  
                oDiv.style.left = newDiv.offsetLeft +'px';  
                oDiv.style.top = newDiv.offsetTop +'px';  
                oDiv.style.filter='alpha(opacity=100)';  
                oDiv.style.opacity=1;  
                document.body.removeChild(newDiv);  
            }  
            return false;  
        }  
  
    }  
</script>  
</head>  
<body>  
<div class="f-wrap">  
    <div id="box" class="box">1</div>  
    <div id="box1" class="box box1">2</div>  
    <h2>小苹果</h2>  
    <p>我种下一颗种子</p>  
    <p>终于长出了果实</p>  
    <p>今天是个伟大日子</p>  
    <p>摘下星星送给你</p>  
    <p>拽下月亮送给你</p>  
    <p>让太阳每天为你升起</p><br>  
  
    <p>变成蜡烛燃烧自己</p>  
    <p>只为照亮你</p>  
    <p>把我一切都献给你</p>  
    <p>只要你欢喜</p>  
    <p>你让我每个明天都</p>  
    <p>变得有意义</p>  
    <p>生命虽短爱你永远</p>  
    <p>不离不弃</p><br>  
  
    <p>你是我的小呀小苹果儿</p>  
    <p>怎么爱你都不嫌多</p>  
    <p>红红的小脸儿温暖我的心窝</p>  
    <p>点亮我生命的火 火火火火</p>  
    <p>你是我的小呀小苹果儿</p>  
    <p>就像天边最美的云朵</p>  
    <p>春天又来到了花开满山坡</p>  
    <p>种下希望就会收获</p><br>  
  
    <p>从不觉得你讨厌</p>  
    <p>你的一切都喜欢</p>  
    <p>有你的每天都新鲜</p>  
    <p>有你阳光更灿烂</p>  
    <p>有你黑夜不黑暗</p>  
    <p>你是白云我是蓝天</p><br>  
  
    <p>春天和你漫步在盛开的 花丛间</p>  
    <p>夏天夜晚陪你一起看 星星眨眼</p>  
    <p>秋天黄昏与你徜徉在 金色麦田</p>  
    <p>冬天雪花飞舞有你 更加温暖</p><br>  
  
    <p>你是我的小呀小苹果儿</p>  
    <p>怎么爱你都不嫌多</p>  
    <p>红红的小脸儿温暖我的心窝</p>  
    <p>点亮我生命的火 火火火火</p>  
    <p>你是我的小呀小苹果儿</p>  
    <p>就像天边最美的云朵</p>  
    <p>春天又来到了花开满山坡</p>  
    <p>种下希望就会收获</p><br>  
  
    <p>你是我的小呀小苹果儿</p>  
    <p>怎么爱你都不嫌多</p>  
    <p>红红的小脸儿温暖我的心窝</p>  
    <p>点亮我生命的火 火火火火</p>  
    <p>你是我的小呀小苹果儿</p>  
    <p>就像天边最美的云朵</p>  
    <p>春天又来到了花开满山坡</p>  
    <p>种下希望就会收获</p>  
</div>  
  
</body>  
</html>

森_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
拖拽+重叠+虚线框（解决移动文字复制问题）

拖拽+重叠+虚线框（解决移动文字复制问题） *{margin:0; padding:0;} .f-wrap{width: 1000px; margin:10px auto;} .box{ position: absolute; top:0; left:40%; width: 150px; height: 150px; color:#fff;
复制链接

扫一扫