拖拽中怎么修复bug

来源：互联网发布：南京旅游攻略知乎编辑：程序博客网时间：2024/04/27 13:43

拖拽原理

设被拖动盒子为“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.onmousedown=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>

每日清新
这里写图片描述

作者：王华桥

0 0