js-盒子拖拽案例_js 拖拽被隱藏-CSDN博客

本文链接：https://blog.csdn.net/cnkeysky/article/details/94299632

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		.wrap {
			width: 400px;
			height: 200px;
			border: 1px solid #ccc;
			border-right-color: red;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -200px;
			margin-top: -100px;
			box-sizing: border-box;
		}
		.wrap .head {
			height: 40px;
			padding-left: 4px;
			padding-right: 4px;
			background-color: #ccc;
			box-sizing: border-box;
			line-height: 40px;
			user-select: none;
		}
		.head:hover {
			cursor: move;
		}
		.head span {
			float: left;
		}
		#close {
			float: right;
		}
		#close:hover {
			cursor: pointer;
		}
	</style>
</head>
<body>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<p>tom</p>
	<div class="wrap">
		<div class="head">
			<span>试着拖拽我</span>
			<span id="close">【关闭】</span>
		</div>
	</div>
	<script>
		let wrap = document.querySelector('.wrap');
		let close = document.getElementById('close');
		let head = document.querySelector('.head');

		head.onmousedown = function (e) {
			// 获得鼠标在 head 中的坐标 
			let x = e.pageX - wrap.offsetLeft;
			let y = e.pageY - wrap.offsetTop;
			console.log(x, y);
			document.onmousemove = function (e) {
				
				let xx = e.pageX - x;
				let yy = e.pageY - y;
				// 设置边界限制
				xx = xx < 0 ? 0 : xx;
				yy = yy < 0 ? 0 : yy;
				if (xx >= innerWidth - wrap.offsetWidth) {
					document.documentElement.scrollLeft = 20;
				} else {
					document.documentElement.scrollLeft = 0;
				}
				xx = xx > innerWidth - wrap.offsetWidth ? innerWidth-wrap.offsetWidth : xx; 
				yy = yy > innerHeight - wrap.offsetHeight + document.documentElement.scrollTop ? innerHeight - wrap.offsetHeight + document.documentElement.scrollTop : yy;
				wrap.style.left = xx + 'px';
				wrap.style.top = yy + 'px';
				// 禁止X滚动轴
				document.body.style.overflowX = 'hidden';
				wrap.style.marginLeft = 0;
				wrap.style.marginTop = 0;
			};
		};

		document.onmouseup = function () {
			document.onmousemove = null;
		};

		close.onclick = function () {
			wrap.style.display = 'none';
		};
	</script>
</body>
</html>

实现效果

效果演示