首页 > 代码库 > 拖拽事件的原理

拖拽事件的原理

2024-09-09 12:55:11   217人阅读

先奉上代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="div1">

</div>
<script type="text/javascript">
    window.onload=function(){
        var Odiv=document.getElementById("div1");
        var disx=0;
        var disy=0;
        Odiv.onmousedown=function(ev){
            var Oevent=ev||event;
          /*鼠标的clientX 为鼠标点击位置的x坐标*/
　　　　　　/*disx  disy为鼠标点击的位置距离Odiv左边界及上边界的距离*/
            disx=Oevent.clientX-Odiv.offsetLeft;
            disy=Oevent.clientY-Odiv.offsetTop;
            document.onmousemove=function(ev){
                var Oevent=ev||event;
　　　　　　/*Oevent表示鼠标，鼠标的位置是不断移动的，鼠标位置减去鼠标距离拖放框的距离就为拖放框的左距离*/
                var l=Oevent.clientX-disx;
                var t=Oevent.clientY-disy;
          /*限制边界事件*/
                if(l<0){
                    l=0;
                }else if(l>document.documentElement.clientWidth-Odiv.offsetWidth){
                    l=document.documentElement.clientWidth-Odiv.offsetWidth;
                }
                if(t<0){
                    t=0;
                }else if(t>document.documentElement.clientHeight-Odiv.offsetHeight){
                    l=document.documentElement.clientWidth-Odiv.offsetWidth;
                }
                Odiv.style.left=l+"px";
                Odiv.style.top=t+"px";
            };
　　　　/*当鼠标抬起时，将行为终止*/
            document.onmouseup=function(){
              document.onmousemove=null;
              document.onmouseup=null;
            };
            return  false;
        }
    }
</script>

</body>
</html>

　　技术分享

各部分位置关系如上图所示

拖拽事件的原理


联系
我们