js拖拽---磁性吸附

太过爱你忘了你带给我的痛 2022-05-16 09:00 178阅读 0赞

直接上代码：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>拖拽-磁性吸附</title>  
    <style type="text/css">  
    \*\{margin:0;padding: 0;\}  
    \#div1\{  
        width: 100px;  
        height: 100px;  
        background: red;  
        position: absolute;  
    \}  
    </style>  
    <script type="text/javascript">  
        window.οnlοad=function()\{  
            var oDiv=document.getElementById('div1');  
   
            oDiv.οnmοusedοwn=function(ev)\{  
                var e=ev||event;  
                var disX=e.clientX-oDiv.offsetLeft;  
                var disY=e.clientY-oDiv.offsetTop;  
   
                document.οnmοusemοve=function(ev)\{  
                    var e=ev||event;  
                    var l=e.clientX-disX;  
                    var t=e.clientY-disY;  
                    if (l<50) \{  
                        l=0;  
                    \}  
                    if (l>document.documentElement.clientWidth-oDiv.offsetWidth-50) \{  
                        l=document.documentElement.clientWidth-oDiv.offsetWidth;  
                    \}  
                    if (t<50) \{  
                        t=0;  
                    \}  
                    if (t>document.documentElement.clientHeight-oDiv.offsetHeight-50) \{  
                        t=document.documentElement.clientHeight-oDiv.offsetHeight;  
                    \}  
                    oDiv.style.left=l+'px';  
                    oDiv.style.top=t+'px';  
                \};  
                document.οnmοuseup=function()\{  
                document.οnmοusemοve='';  
                document.οnmοuseup='';  
                \};  
                return false;  
            \};  
   
        \}  
    </script>  
</head>  
<body>  
    <div id="div1"></div>  
</body>  
</html>

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

[20191229112121499.png]: /images/20220516/102c3828c8964508b40243bf897d5c45.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: /images/20220516/e04b2291bedb42b8807b60660dcacd08.png