js实现拖拽(参考网络)

最新推荐文章于 2020-08-07 18:38:49 发布

继续去踢波

最新推荐文章于 2020-08-07 18:38:49 发布

阅读量479

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/LOW584710047/article/details/47106693

版权

JS 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8" />
		<title>js实现拖拽</title>
		<style>
			#water{
				width:400px;
				height:188px;
				background-color: #ff6600;
			}
			#water:hover{
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="water"></div>
		<script>
			dragInit("water");//调用





			//拖拽初始化
			function dragInit(id){
				var $div = document.getElementById(id);
				var style = {
					position: "absolute",
					left: "0",
					top: "0"
				}
				for(var k in style){
					$div.style[k] = style[k];//设置关键css
				}
			    $div.onmousedown = function(e){//鼠标按键按下
			        e = e || window.event;
			        var x = e.clientX - $div.offsetLeft;//鼠标到左上角的距离信息, 固定不变
			        var y = e.clientY - $div.offsetTop;

			        document.onmousemove = function(e){//鼠标移动
			            e = e || window.event;
			            var L = e.clientX - x;
			            var T = e.clientY - y;
			            
						var pW = document.documentElement.clientWidth;//页面宽度
						var pH = document.documentElement.clientHeight;
						var divW = $div.offsetWidth;//Dom宽度
						var divH = $div.offsetHeight;

			            // 范围限定
			            if(L < 0){
			            	L = 0;
			        	}
		        		if(T < 0){
			        		T = 0;
			        	}
			        	if(L > pW - divW){
			        		L = pW - divW;
			        	}
			        	if(T > pH - divH){
			        		T = pH - divH;
			        	}
			        	// 范围限定 end

			        	$div.style.left = L + "px";
			            $div.style.top = T + "px";
			        };

			        document.onmouseup = function(e){//鼠标按键松开
			        	document.onmousemove = null;
			        };
			    };
			}
		</script>
	</body>
</html>

继续去踢波

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现拖拽(参考网络)

js实现拖拽 #water{ width:400px; height:188px; background-color: #ff6600; } #water:hover{ cursor: pointer; } dragInit("water");//调用 //拖拽初始化 functio
复制链接

扫一扫