拖拽中怎么修复bug

最新推荐文章于 2023-10-26 11:35:53 发布

原创最新推荐文章于 2023-10-26 11:35:53 发布 · 371 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#鼠标 #box

个人心得专栏收录该内容

11 篇文章

订阅专栏

本文介绍了拖拽原理，通过设置Box元素的position为absolute，并获取鼠标坐标和元素相对父级的位置，计算出鼠标与盒子的偏移量。在鼠标按下事件中更新Box的即时坐标，实现拖动效果。提供了一个案例代码，由作者王华桥分享。

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

拖拽原理

设被拖动盒子为“Box”；
设iEvent=ev || event;
给Box设position：absolute样式；

鼠标坐标（iEvent.clientX和 iEvent.clientY）；
Box相对父级距离（Box.offsetLeft 和 Box.offsetTop）
计算出鼠标相对于盒子的距离（BoxX=iEvent.clientX-Box.offsetLeft 和 BoxY=iEvent.clientY-Box.offsetTop）

给Box添加鼠标按下事件：Box.οnmοusedοwn=function(){};

Box的即时坐标：
Box.style.left=iEvent.clientX-BoxX+’px’;
Box.style.top=iEvent.clientY-BoxY+’px’;

案列代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 200px;
                height: 120px;
                background-color: crimson;
                position: absolute;
                cursor: pointer;
            }

        </style>
        <script type="text/javascript">
            window.onload=function(){
                var Box=document.getElementById('box');
                var divX=0;
                var divY=0;
                Box.onmousedown=function(ev){
                    var iEvent=ev || event;
                    divX=iEvent.clientX-Box.offsetLeft;
                    divY=iEvent.clientY-Box.offsetTop;
                    document.onmousemove=function(ev){
                        var iEvent=ev || event;                     
                        Box.style.left=iEvent.clientX-divX+'px';
                        Box.style.top=iEvent.clientY-divY+'px';                     
                    };                                      
                };
                Box.onmouseup=function(){
                    document.onmousemove=null;                                  
                };
            };
        </script>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>