拖拽封装、碰撞检测

最新推荐文章于 2022-03-29 20:44:18 发布

菲允龙歌

最新推荐文章于 2022-03-29 20:44:18 发布

阅读量174

点赞数

分类专栏：应用案例文章标签： js

本文链接：https://blog.csdn.net/Steve_Richard/article/details/100714480

版权

应用案例专栏收录该内容

23 篇文章 1 订阅

订阅专栏

拖拽封装

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin:0; padding: 0;}
        #box{ width: 100px; height: 100px; background: red; position:absolute; left: 0; top: 0;}
        #box1{ width: 100px; height: 100px; background: blue; position:absolute; left: 200px; top: 0;}
    </style>
</head>
<body>
    <!-- 拖拽动画 -->
    <div id="box">
        人无再少年,书有重读日
    </div>
    <div id="box1">
            人无再少年,书有重读日
        </div>
    <!-- <img src="images/1.jpg" alt="" id="box"> -->
    <script>
        var box = document.getElementById('box');
        var box1 = document.getElementById('box1');
        drag(box)
        drag(box1)
        function drag(obj){
            obj.onmousedown = function(ev){
            var ev = window.event || ev
            var x = ev.clientX - obj.offsetLeft
            var y = ev.clientY - obj.offsetTop
            document.onmousemove = function(ev){
                var ev = window.event || ev
                var L = ev.clientX - x
                var T = ev.clientY - y
                if(L<0){
                    L=0
                }
                if(L>document.documentElement.clientWidth - obj.offsetWidth){
                    L=document.documentElement.clientWidth - obj.offsetWidth
                }
                if(T<0){
                    T=0
                }
                if(T>document.documentElement.clientHeight - obj.offsetHeight){
                    T = document.documentElement.clientHeight - obj.offsetHeight
                }
                // console.log(L,T,222)
                obj.style.left = L+'px'
                obj.style.top = T+'px'
            } 
            document.onmouseup = function(){
                document.onmousemove = null
            }
            return false;
        }
        }
    </script>
</body>
</html>

碰撞检测

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {padding: 0;margin: 0;}
        #box {width: 200px;height: 200px;position: fixed;left: 50%;top: 50%;margin-left: -100px;margin-top: -100px;background-color: red;}
        #demo {width: 100px;height: 100px;background-color: #999;position: absolute;left: 0;top: 0;}
    </style>
</head>
<body>
    <div id="box"></div>
    <!-- <img src="images/1.jpg" alt="" id="img"> -->
    <div id="demo"></div>
    <script>
        var box = document.querySelector('#box')
        var demo = document.querySelector('#demo')
        move(demo)
        function move(obj){
            obj.onmousedown = function(ev){
                var ev = window.event || ev
                var x = ev.clientX - demo.offsetLeft
                var y = ev.clientY - demo.offsetTop
                document.onmousemove = function(ev){
                    var l = ev.clientX - x
                    var t = ev.clientY - y
                    
                    if(l<0){
                        l=0
                    }
                    if(l>document.documentElement.clientWidth-obj.offsetWidth){
                        l = document.documentElement.clientWidth-obj.offsetWidth
                    }
                    if(t<0){
                        t=0
                    }
                    if(t>document.documentElement.clientHeight-obj.offsetHeight){
                        t=document.documentElement.clientHeight-obj.offsetHeight
                    }
    
                    demo.style.left = l+'px'
                    demo.style.top = t+'px'
    
                    var boxl = box.offsetLeft
                    var boxr = box.offsetLeft+box.clientWidth
                    var boxt = box.offsetTop
                    var boxb = box.offsetTop+box.clientHeight
    
                    var imgl = demo.offsetLeft
                    var imgr = demo.offsetLeft+demo.clientWidth
                    var imgt = demo.offsetTop
                    var imgb = demo.offsetTop+demo.clientHeight
    
                    if(imgr<boxl || imgl>boxr || imgb<boxt || imgt>boxb){
                        box.style.background = 'red'
                    }else{
                        box.style.background = 'blue'
                    }
                    return false
    
                }
                document.onmouseup = function(){
                    document.onmousemove = null
                }
                return false
            }
        }

        
    </script>
</body>
</html>