javascript元素拖拽效果的实现

最新推荐文章于 2024-04-24 16:12:04 发布

星空你好

最新推荐文章于 2024-04-24 16:12:04 发布

阅读量401

点赞数 1

文章标签： js javascript css

本文链接：https://blog.csdn.net/xingkongtianyuzhao/article/details/105778328

版权

主要涉及三个鼠标事件 mousedown,onmousemove和onmouseup
注意：onmouseup绑定在document对象上，因为释放鼠标时，有可能鼠标不在拖动的元素上

鼠标事件1 - 在标题栏上按下(要计算鼠标相对拖拽元素左上角的坐标，并且标记元素为可拖动)
鼠标事件2 - 鼠标移动时(要检测，元素是否可标记为移动，如果是，则更新元素的位置到当前鼠标的位置[要减去第一步中获得的偏移])
鼠标事件3 - 鼠标松开的时候(标记元素为不可拖动即可)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>鼠标拖拽元素实现</title>
		<style type="text/css">
			#draggable {
				width: 100px;
				height: 100px;
				position: absolute;
				top: 100px;
				left: 100px;
				border: 1px solid #ccc;
				background: #eee;
				padding: 10px;
				cursor: default;
			}
		</style>
	</head>
	<body>

		<div id="draggable">拖我</div>

		<script type="text/javascript">
			var oDrag = document.getElementById('draggable');
			var isDraging = false;
			var startX = 0;
			var startY = 0;
			oDrag.addEventListener('mousedown', function(e) {
				//鼠标事件1 - 在标题栏按下（要计算鼠标相对拖拽元素的左上角的坐标 ，并且标记元素为可拖动） 
				var e = e || window.event;
				mouseOffsetX = e.pageX - oDrag.offsetLeft;
				mouseOffsetY = e.pageY - oDrag.offsetTop;
				isDraging = true;
			})
			document.onmouseup = function(e) {
				//鼠标事件3 - 鼠标松开的时候（标记元素为不可拖动）
				isDraging = false;
			}
			document.onmousemove = function(e) {
				//鼠标事件2 - 鼠标移动时（要检测，元素是否标记为移动）
				var e = e || window.event;

				var mouseX = e.pageX; //鼠标当前的位置
				var mouseY = e.pageY;

				var moveX = 0; //浮层元素的新位置
				var moveY = 0;

				if (isDraging === true) {
					moveX = mouseX - mouseOffsetX;
					moveY = mouseY - mouseOffsetY;

					// 范围限定 moveX>0 并且 moveX < (页面最大宽度-浮层的宽度)
					//		   moveY>0 并且 moveY < (页面最大高度-浮层的高度)
					//页面宽高
					var pageWidth = document.documentElement.clientWidth;
					var pageHeight = document.documentElement.clientHeight;
					//图层宽高
					var dialogWidth = oDrag.offsetWidth;
					var dialogHeight = oDrag.offsetHeight;

					var maxX = pageWidth - dialogWidth;
					var maxY = pageHeight - dialogHeight;

					var moveX = Math.min(maxX, Math.max(0, moveX));
					var moveY = Math.min(maxY, Math.max(0, moveY));

					oDrag.style.left = moveX + 'px';
					oDrag.style.top = moveY + 'px';
				}
			};
		</script>
	</body>
</html>

星空你好

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript元素拖拽效果的实现

主要涉及三个鼠标事件 mousedown,onmousemove和onmouseup注意：onmouseup绑定在document对象上，因为释放鼠标时，有可能鼠标不在拖动的元素上鼠标事件1 - 在标题栏上按下(要计算鼠标相对拖拽元素左上角的坐标，并且标记元素为可拖动)鼠标事件2 - 鼠标移动时(要检测，元素是否可标记为移动，如果是，则更新元素的位置到当前鼠标的位置[要减去第一步中获得的偏...
复制链接

扫一扫