元素拖拽与缩放

最新推荐文章于 2023-09-27 16:22:12 发布

n号麻雀

最新推荐文章于 2023-09-27 16:22:12 发布

阅读量360

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Hexin666/article/details/124035426

版权

根据其他作者的文章做了一下记录，拖拽是根据元素事件行为不断的去更新元素的偏移量来达到拖拽的效果，缩放可以有3种方法去实现，1，直接改变宽高属性达到视觉上的缩放效果。2，scale属性。3，zoom属性。注意一下 scale和zoom属性缩放过后再进行拖拽的话，元素的偏移量会有一定的偏差，想要精确的偏移量需要重新计算。

贴一个demo,有兴趣的可以试试看

<html>
	<head>
		<style type="text/css">
			#container {
				width: 100%;
				height: 100%;
				position: relative;

			}

			#body {
				margin: auto;
				width: 50%;
				position: relative;
				background: #ccc;
			}

			#dragBox {
				user-select: none;
				width: 70px;
				height: 70px;
				background-color: firebrick;
				cursor: pointer;
				position: absolute;
				left: -70px;
			}
		</style>
	</head>

	<body>
		<div id="body">
			<div id="container">
				<div id="dragBox" onmousedown="dragBox_event_mousedown(arguments[0]);"></div>
			</div>
		</div>

		<script>
			function dragBox_event_mousedown(e) {
				console.log(e)
				var obj, temp;
				obj = document.getElementById("dragBox");
				obj.startX = e.clientX - obj.offsetLeft;
				obj.startY = e.clientY - obj.offsetTop;
				console.log(obj.startX)
				document.onmousemove = compute;
				document.addEventListener("mouseup", document_event_mouseup, "");
			}

			function document_event_mousemove(e) {
				compute(e)

			}

			function document_event_mouseup() {
				console.log('松开')
				document.onmousemove = "";
				// document.removeEventListener("mouseup", document_event_mouseup, "");
			}

			function compute(e) {
				let dom = document.getElementById('container')
				var obj = document.getElementById("dragBox");
				let maxW = dom.clientWidth - obj.clientWidth
				let maxH = dom.clientHeight - obj.clientHeight
				let clientW = dom.clientX
				let clientH = dom.clientH
				let domLeft = e.clientX - obj.startX
				let domTop = e.clientY - obj.startY;
				// console.log('x坐标:'+domLeft < 0 ? 0 : domLeft > maxW ? maxW : domLeft)

				obj.style.position = "absolute";
				obj.style.left = domLeft < 0 ? 0 : domLeft > maxW ? maxW : domLeft + "px";
				obj.style.top = domTop < 0 ? 0 : domTop > maxH ? maxH : domTop + "px";

			}


			function domScale() {
				var box = document.getElementById('dragBox');
				console.log(box.offsetWidth)
				var str = window.navigator.userAgent.toLowerCase();
				if (str.indexOf('firefox') != -1) { //火狐浏览器
					box.addEventListener('DOMMouseScroll', function(event) {
						// event.preventDefault();//阻止窗口默认的滚动事件
						// console.log(event.detail);//前滚-3

						if (event.detail < 0) {
							if (box.offsetWidth > 100) {
								return
							}
							console.log('前滚');
							box.style.width = box.offsetWidth + 5 + 'px';
							box.style.height = box.offsetHeight + 5 + 'px';
						};
						if (event.detail > 0) {
							if (box.offsetWidth < 40) {
								return
							}
							console.log('后滚');
							box.style.width = box.offsetWidth - 5 + 'px';
							box.style.height = box.offsetHeight - 5 + 'px';
						};
						return false; //阻止默认事件
					}, false);
				} else { //非火狐浏览器
					box.onmousewheel = function(ev) {
						var e = ev || window.event;
						/*if (e.preventDefault) {
						    e.preventDefault();
						} else{
						    e.returnValue=false;
						};*/
						// console.log(e);
						// console.log(e.wheelDelta);//前滚120
						if (e.wheelDelta > 0) {
							if (box.offsetWidth > 100) {
								return
							}
							console.log('前滚');
							box.style.width = box.offsetWidth + 5 + 'px';
							box.style.height = box.offsetHeight + 5 + 'px';
						};
						if (e.wheelDelta < 0) {
							if (box.offsetWidth < 40) {
								return
							}
							console.log('后滚');
							box.style.width = box.offsetWidth - 5 + 'px';
							box.style.height = box.offsetHeight - 5 + 'px';
						};
						return false; //阻止默认事件
					}
				};
			}

			function domScale1() {
				let scale = 1
				var box = document.getElementById('dragBox');
				var str = window.navigator.userAgent.toLowerCase();
				if (str.indexOf('firefox') != -1) { //火狐浏览器
					box.addEventListener('DOMMouseScroll', function(event) {
						// event.preventDefault();//阻止窗口默认的滚动事件
						// console.log(event.detail);//前滚-3

						if (event.detail < 0) {
							if (scale > 2) {
								return
							}
							console.log('前滚');
							scale += 0.1
							box.style.transform = "scale(" + scale + ")";
						};
						if (event.detail > 0) {
							if (scale < 0.5) {
								return
							}
							console.log('后滚');
							scale -= 0.1
							box.style.transform = "scale(" + scale + ")";
						};
						return false; //阻止默认事件
					}, false);
				} else { //非火狐浏览器
					box.onmousewheel = function(ev) {
						var e = ev || window.event;
						/*if (e.preventDefault) {
						    e.preventDefault();
						} else{
						    e.returnValue=false;
						};*/
						// console.log(e);
						// console.log(e.wheelDelta);//前滚120
						if (e.wheelDelta > 0) {
							if (scale > 2) {
								return
							}
							console.log('前滚');
							scale += 0.1
							box.style.transform = "scale(" + scale + ")";
							console.log(box.offsetWidth)
						};
						if (e.wheelDelta < 0) {
							if (scale < 0.5) {
								return
							}
							console.log('后滚');
							scale -= 0.1
							box.style.transform = "scale(" + scale + ")";
						};
						return false; //阻止默认事件
					}
				};
			}
			domScale() //改变宽高属性进行缩放
			// domScale1() //scale方式缩放
		</script>
	</body>
</html>

n号麻雀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素拖拽与缩放

根据其他作者的文章做了一下记录，拖拽是根据元素事件行为不断的去更新元素的偏移量来达到拖拽的效果，缩放可以有3种方法去实现，1，直接改变宽高属性达到视觉上的缩放效果。2，scale属性。3，zoom属性。注意一下 scale和zoom属性缩放过后再进行拖拽的话，元素的偏移量会有一定的偏差，想要精确的偏移量需要重新计算。贴一个demo,有兴趣的可以试试看<html> <head> <style type="text/css"> #container {
复制链接

扫一扫