js完美拖拽效果

最新推荐文章于 2021-10-20 20:25:09 发布

马晨宇

最新推荐文章于 2021-10-20 20:25:09 发布

阅读量2.1k

点赞数 1

分类专栏： js

本文链接：https://blog.youkuaiyun.com/mcyhero/article/details/90897525

版权

js 专栏收录该内容

16 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
			}
			#box{
			    height: 100px;
			    width: 100px;
				background: red;
			    position: absolute;
			    cursor: move;
			    background-size: 100px 100px;
			}
		</style>
	</head>
	<body>
		<div id="box">			
		</div>
	</body>
</html>

var box = document.getElementById("box");
	fztz(box);
function fztz(id){
	id.onmousedown = function(evt){
		var e = evt || event;
		var ofX = e.offsetX;
		var ofY = e.offsetY;
		document.onmousemove = function(evt){
			var e = evt || event;
			var x = e.pageX - ofX;
			var y = e.pageY - ofY;			
			if(x<0){
				x = 0;
			}
			var maxX = window.innerWidth - id.offsetWidth;
			if(x>maxX){
				x = maxX;
			}			
			if(y<0){
				y = 0;
			}
			var maxY = window.innerHeight - id.offsetHeight;
			if(y>maxY){
				y = maxY;
			}
			id.style.left = x + "px";
			id.style.top = y + "px";
		}
		document.onmouseup = function(){
			document.onmousemove = "";
		}
	}
}