javascript鼠标拖动层跟不上鼠标的速度解决方案

最新推荐文章于 2025-03-13 15:53:01 发布

转载最新推荐文章于 2025-03-13 15:53:01 发布 · 3.2k 阅读

标签

#javascript #function #xhtml #html #null

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文将介绍如何使用JavaScript实现鼠标拖动层的功能，包括事件监听、位置计算和捕获释放操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>鼠标拖动层</title> 
</head>
<body>
<div id="floatLayer" style="position:absolute;width:200px;height:200px;background:black;"></div>
<script type="text/javascript">
function Drag(id) {
        var obj = document.getElementById(id);
        //设置初始值
        var flag = 0;
        var minus_x = 0;
        var minus_y = 0;
        obj.onmousedown = function(e){
                var evt = e || window.event;
					if (document.setCapture) this.setCapture();
					if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
                flag = 1;
                this.style.cursor = 'move';
                minus_x = evt.clientX - obj.offsetLeft;
                minus_y = evt.clientY - obj.offsetTop;  
        }
		
        document.onmousemove = function(e){
                var evt = e || window.event;
                if(flag) {
                        obj.style.left = parseInt(evt.clientX - minus_x) + 'px';
                        obj.style.top = parseInt(evt.clientY - minus_y) + 'px';
                }else{
                        return null;
                }
                            
                               
                }
        obj.onmouseup = function(){
               if (document.releaseCapture) this.releaseCapture();
               if (window.releaseEvents) window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
               flag = 0;
        }
}

Drag('floatLayer');
</script>

</body> 
</html>

以上代码在FF IE8 360极速下测试通过。