父元素中拖动子元素实现

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

Haip

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

阅读量2.1k

点赞数 1

分类专栏： javascript 文章标签：子元素在父元素范围内拖动

本文链接：https://blog.csdn.net/u014324940/article/details/86526447

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

结果

过程

鼠标点下事件的event为鼠标相对于浏览器窗口的位置信息
子元素要在父元素范围内拖动，那就有一个允许拖动的范围，子元素本身有宽高，这也是拖动范围计算要考虑的
首先获取mousedown的点相对于子元素边界的距离
按下的点相对于子元素边界的信息
上面计算得到的距离也作为子元素边界到容器边界的距离极值
mouseBounds得到的结果为鼠标相对于浏览器可以移动的范围
因父元素相对于浏览器窗口还有一个相对的距离，为上面的offsetX、offsetY
子元素在父元素内的位置计算
上面的计算内容当按下点在前面计算得到范围内的判断，如果在超出范围则赋予对应的极值，最后结果还要减去父元素相对于浏览器的偏移值

代码

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
		<style>
			html,body,.father {margin: 0;height: 100%;width: 100%;}
            body{display: flex;justify-content: center; align-items: center;}
            .contain{ position: relative; height: 90%;width: 90%;border: black 1px solid;background-color: rgba(205, 135, 222, 0.767);}
			.child {position: absolute;height: 200px;width: 200px;border: black 1px solid;background-color: coral;}
		</style>
	</head>
	<body>
		<div class="contain">
			<div id="father" class="father">
				<div
					id="child"
					class="child"
					onmousedown="mouseDown(event)"
				></div>
			</div>
		</div>
		<script>
			let child = document.querySelector('#child')
			const mouseDown = evt => {
				let mBounds = mouseBounds(
					evt,
					child.getClientRects()[0],
					document.querySelector('#father').getClientRects()[0]
				)
				document.onmousemove = function(ev) {
					let pt = calcPositon(ev, mBounds)
					child.style.left = pt.left + 'px'
					child.style.top = pt.top + 'px'
					child.style.opacity = 0.9
					child.style.cursor = 'move'
				}
				document.onmouseup = function() {
					document.onmousemove = null
					document.onmouseup = null
					child.style.opacity = 1
					child.style.cursor = 'default'
				}
			}
			const calcPositon = (pt, bounds) => {
				const left =
					(pt.x > bounds.left && pt.x < bounds.right
						? pt.x
						: pt.x >= bounds.right
						? bounds.right
						: bounds.left) - bounds.offsetX
				const top =
					(pt.y > bounds.top && pt.y < bounds.bottom
						? pt.y
						: pt.y >= bounds.bottom
						? bounds.bottom
						: bounds.top) - bounds.offsetY
				return { left, top }
			}
			/**
			 * 鼠标可以移动的范围
			 * pt:鼠标按下的点
			 * compRact：要移动组件的矩形对象
			 * containerRact：容器的矩形对象
			 * return 的范围为浏览器窗口中的范围
			 */
			const mouseBounds = (pt, compRact, containerRact) => {
				return {
					left: containerRact.left + (pt.x - compRact.left),
					right: containerRact.right - (compRact.right - pt.x),
					top: containerRact.top + (pt.y - compRact.top),
					bottom: containerRact.bottom - (compRact.bottom - pt.y),
					offsetX: containerRact.left + (pt.x - compRact.left),
					offsetY: containerRact.top + (pt.y - compRact.top)
				}
			}
		</script>
	</body>
</html>

Haip

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
父元素中拖动子元素实现

结果过程鼠标点下事件的event为鼠标相对于浏览器窗口的位置信息子元素要在父元素范围内拖动，那就有一个允许拖动的范围，子元素本身有宽高，这也是拖动范围计算要考虑的首先获取mousedown的点相对于子元素边界的距离上面计算得到的距离也作为子元素边界到容器边界的距离极值mouseBounds得到的结果为鼠标相对于浏览器可以移动的范围因父元素相对于浏览器窗口还有一个相对的距离，为上面...
复制链接

扫一扫