div的拖动

最新推荐文章于 2024-04-09 00:58:19 发布

原创最新推荐文章于 2024-04-09 00:58:19 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#鼠标 #指针 #移动

JavaScript 专栏收录该内容

47 篇文章

订阅专栏

本文详细介绍了如何通过JavaScript实现网页中Div元素的拖动功能，包括理解鼠标事件、计算偏移量、限制拖动边界等关键技术点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实现div的拖动之前，首现要认识三个主要的事件
onmousedown鼠标按下的时候（不能松开）

onmousemove鼠标指针在屏幕上移动的时候（抚摸事件）

onmouseup鼠标松开的时候
知道这些事件之后，我们首先搭建好一个div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#box{width: 100px;height: 100px;background-color: orange;position: absolute;}
		</style>
		
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
</html>
当我们实现鼠标按下拖动的时候，在div身上肯定有一个落脚点，如图所示：（白色区域代表电脑屏幕，棕黄色代表div盒子，红色代表落脚点）<img src="https://img-blog.youkuaiyun.com/20161012160100422?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

我们要实现拖动原理，意思就是要在拖动期间无时无刻给大盒子一个定位，定死在你想移动的地方
但是这个地方不是一成不变的，看图分析

我们既然要以盒子的定位入手，那么就必须找到落脚点距离盒子左上角的位置，如上图所示
当我们按下鼠标的时候，产生一个红色的落脚点，clientX和clientY就代表这个落脚点在屏幕里的坐标（X,Y）
我们要想获得棕黑色的长度，就可以使用X的坐标减去盒子距离坐标的长度，同理可得出上边的长度

<!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: 500px;height: 500px;position: relative;overflow: hidden;}
        img{position: absolute;top: 0;left: 0;}
    </style>
</head>
<body>
    <div id="box">
        <img id="photo" src="./ceshi.jpg" />
    </div>
</body>
<script type="text/javascript">
    window.onload=function () {
        var oBox=document.getElementById('photo');
        var divx=0;
        var divy=0;
        oBox.onmousedown = function(ev){
            var iEvent=ev||event;//兼容处理,兼容所有浏览器
            divx=iEvent.clientX - oBox.offsetLeft;//此时的oBox距离左边和上边的长度均为0，因为我们还没有拖动。
            divy=iEvent.clientY - oBox.offsetTop;//此时得到的就是divx和divy就是棕黑色的距离。
            document.onmousemove = function(ev){
                var iEvent=ev||event;
                oBox.style.top=iEvent.clientY-divy+'px';//当Y轴的坐标距离减去棕黑色的长度，得到的就是盒子距离上边的距离（oBox.offsetTop）
                oBox.style.left=iEvent.clientX-divx+'px';//同理
                if(iEvent.clientY-divy<0){//当盒子距离上边的距离小于0的时候，让它一直为0，防止移出屏幕外，出现bug
                    oBox.style.top='0';
                }
                if(iEvent.clientX-divx<0){//同理
                    oBox.style.left='0'
                }
                var windowH = document.documentElement.clientHeight || document.body.clientHeight;
                var windowW = document.documentElement.clientWidth || document.body.clientWidth;
                if(iEvent.clientY-divy > windowH - oBox.offsetHeight){//屏幕可视区域的宽度减去盒子的宽度，得到的就是盒子能达到最右边的距离（不能再大）
                    oBox.style.top = windowH - oBox.offsetHeight+'px'
                }
                if(iEvent.clientX-divx > windowW - oBox.offsetWidth){//同理
                    oBox.style.left= windowW - oBox.offsetWidth+'px';
                }
            }
            document.onmouseup = function(){
                document.onmousedown=null;
                document.onmousemove=null;
            }
            return false;//这里的作用就是，当我们快速拖动的时候，会出现盒子的“鬼影”，此处作用就是消除鬼影。
        }
    }
</script>
</html>