原生js拖拽

最新推荐文章于 2024-03-06 23:50:33 发布

凉城以北夜微凉

最新推荐文章于 2024-03-06 23:50:33 发布

阅读量246

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/hello_mujinhua/article/details/71713373

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.drag{
			position:absolute;
			width:200px;
			height:200px;
			cursor: move;
			display: block;
			border:1px solid #000;
			background-color:red;
		}
	</style>
</head>
<body>
	<div class="drag" id="drag"></div>
	<script type="text/javascript">
		window.οnlοad=function(){
			var drag=document.getElementById('drag');
			drag.οnmοusedοwn=function(e){
				var e=e || window.event;
				var disX=e.clientX-drag.offsetLeft;
				var disY=e.clientY-drag.offsetTop;
				//解决低版本ie bug
				if(typeof drag.setCapture!="undefined"){
					drag.setCapture();
				}
				/*低版本ie bug:物体被拖出浏览器可是窗口外部时，还会出现滚动条，  
            解决方法是采用ie浏览器独有的2个方法setCapture()\releaseCapture(),这两个方法，  
            可以让鼠标滑动到浏览器外部也可以捕获到事件，而我们的bug就是当鼠标移出浏览器的时候，  
            限制超过的功能就失效了。用这个方法，即可解决这个问题。注：这两个方法用于onmousedown和onmouseup中*/  
				document.οnmοusemοve=function(e){
					var e=e || window.event;
					var left=e.clientX-disX;
					var top=e.clientY-disY;
					if(left<0){
						left=0;
					}else if(left>window.innerWidth-drag.offsetWidth){
						left=window.innerWidth-drag.offsetWidth;
					}

					if(top<0){
						top=0;
					}else if(top>window.innerHeight-drag.offsetHeight){
						top=window.innerHeight-drag.offsetHeight;
					}

					drag.style.left=left+'px';
					drag.style.top=top+'px';
				};
				document.οnmοuseup=function(e){
					this.οnmοusemοve=null;
					this.οnmοusedοwn=null;

					if(typeof drag.releaseCapture!="undefined"){
						drag.releaseCapture();
					}
				};
			};
		}
	</script>
</body>
</html>

凉城以北夜微凉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js拖拽

.drag{ position:absolute; width:200px; height:200px; cursor: move; display: block; border:1px solid #000; background-color:red; } window.onload=function(){ var drag
复制链接

扫一扫