可以在父级元素内移动的元素

最新推荐文章于 2022-09-10 17:10:21 发布

山顶洞人95277

最新推荐文章于 2022-09-10 17:10:21 发布

阅读量342

点赞数

本文链接：https://blog.csdn.net/weixin_44567226/article/details/89082536

版权

代码如下：
自行引用jquery插件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>可移动元素</title>
<style>
	#box{
		position: absolute;
		width: 100px;
		height:100px;
		background:#FF0000;
	}
	#body{
		height: 500px;
		width: 500px;
		background: #7E7E7E;
		position: fixed;
	}
</style>
</head>
<body>
	<div id="body">
	<!-- 工具箱 开始 -->
	<div id="box"></div>
	<!-- 工具箱 结束 -->
	</div>
	<script src="自行引用jquery插件 " type="text/javascript"></script>
	<script type="text/javascript">
		// 获取元素和初始值
		var oBox = document.getElementById('box'),disX = 0, disY = 0;
		// 容器鼠标按下事件
		oBox.onmousedown = function (e){
        // 获取#box和#body的宽高
		var browserWidth = $("#body").width(),
			browserHeight = $("#body").height(),
			boxWidth = $("#box").width(),
			boxHeight = $("#box").height();
		    // 获取浏览器可见区域宽高，div宽高
			var e = e || window.event; 
			disX = e.clientX - this.offsetLeft;
			disY = e.clientY - this.offsetTop;
            //鼠标移动事件
			document.onmousemove = function (e){
				var e = e || window.event;
				oBox.style.left = (e.clientX - disX) + 'px';
                //限制#box超出父级元素
				if((e.clientX - disX)<=0){
					oBox.style.left = 0;
				}else if((boxWidth - disX + e.clientX) >= browserWidth){
					oBox.style.left = browserWidth - boxWidth + "px";
				}
				oBox.style.top = (e.clientY - disY) + 'px';
				if((e.clientY - disY) <= 0){
					oBox.style.top = 0;
				}else if((boxHeight - disY + e.clientY) >= browserHeight){
					oBox.style.top = browserHeight - boxHeight + "px";
				}
			};
            //鼠标松开事件，停止移动
			document.onmouseup = function (){
				document.onmousemove = null;
			};
			return false;
		};
	</script>
</body>

</html>

并不是一定要Jquery插件，可以用原始的语句获取元素的宽高。只是考虑到需要此功能的人大多都在使用Jquery插件。