div 拖拽移动

最新推荐文章于 2022-07-08 20:32:20 发布

郭浩326

最新推荐文章于 2022-07-08 20:32:20 发布

阅读量706

点赞数

分类专栏： html javascript

本文链接：https://blog.csdn.net/guohao326/article/details/87934353

版权

javascript 同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

html

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
			*{
				padding: 0;
				margin: 0;
			}
            #box {
                width: 100px; 
                height: 100px; 
                background: blue; 
                position: absolute;
            }
        </style>
        <title>拖拽</title>
        <script>
            var oBox=null;
            var disX=0;
            var disY=0;
            
            window.onload=function(){
                oBox=document.getElementById('box');
                
                oBox.onmousedown=fnDown;
            };
            //鼠标按下事件
            function fnDown(ev){				
                var oEvent = ev||event;
                disX = oEvent.clientX - oBox.offsetLeft;
				
                disY = oEvent.clientY - oBox.offsetTop;
		             
                document.onmousemove = fnMove;
                document.onmouseup = fnUp;
            }
            //鼠标移动事件
            function fnMove(ev){
                var oEvent=ev||event;
                
                oBox.style.left = oEvent.clientX - disX + 'px';
				
                oBox.style.top = oEvent.clientY - disY + 'px';
            }
            //鼠标抬起事件
            function fnUp(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        </script>
    </head>

<body>
    <div id="box"></div>
</body>
</html>