master

分支 (2)

管理

管理

master

dev_test

web-test
/
可拖动div大小改变.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			* {
				margin: 0;
				padding: 0
			}

			.boxTest {
				width: 300px;
				height: 300px;
				position: absolute;
				top: 100px;
				left: 100px;
				background: red;
			}

			/*四边*/
			/* .boxTest .t,
			.boxTest .b,
			.boxTest .l,
			.boxTest .r {
				position: absolute;
				z-index: 1;
				background: #666;
			} */

			/* .box .l,
			.box .r {
				width: 5px;
				height: 100%;
				cursor: col-resize;
			}

			.boxTest .t,
			.boxTest .b {
				width: 100%;
				height: 5px;
				cursor: row-resize;
			} */

			/* .boxTest .t {
				top: 0;
			}

			.boxTest .b {
				bottom: 0;
			}

			.boxTest .l {
				left: 0;
			}

			.boxTest .r {
				right: 0;
			}
 */
			/*四角*/
			.boxTest .tl,
			.boxTest .bl,
			.boxTest .br,
			.boxTest .tr {
				width: 8px;
				height: 8px;
				position: absolute;
				background: #fff;
				border: 1px solid #666;
				z-index: 2;
				cursor: nwse-resize
			}

			.boxTest .tl,
			.boxTest .bl {
				left: -5px;
			}

			.boxTest .tr,
			.boxTest .br {
				right: -5px;
			}

			.boxTest .br,
			.boxTest .bl {
				bottom: -5px;
			}

			.boxTest .tl,
			.boxTest .tr {
				top: -5px;
			}

			.boxTest .tr,
			.boxTest .bl {
				cursor: nesw-resize;
			}

			/*内核*/
			.inner {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<!-- 将边线的缩放也加了 -->
		<div id="containerOne1" class="boxTest" id="odiv">
			<!-- <span class="r"></span>
			<span class="l"></span>
			<span class="t"></span>
			<span class="b"></span> -->
			<span class="br"></span>
			<span class="bl"></span>
			<span class="tr"></span>
			<span class="tl"></span>
			<div class="inner"></div>
		</div>
		<script>
			window.onload = function() {debugger;
				//var oDiv = document.getElementsByTagName('div')[0];
				var oDiv = document.getElementById("containerOne1");
				oDiv.style.width = '500px';
				var aSpan = oDiv.getElementsByTagName('span');
				for (var i = 0; i < aSpan.length; i++) {
					dragFn(aSpan[i]);
				}

				function dragFn(obj) {
					obj.onmousedown = function(ev) {
						var oEv = ev || event;
						oEv.stopPropagation();
						var oldWidth = oDiv.offsetWidth;
						var oldHeight = oDiv.offsetHeight;
						var oldX = oEv.clientX;
						var oldY = oEv.clientY;
						var oldLeft = oDiv.offsetLeft;
						var oldTop = oDiv.offsetTop;

						document.onmousemove = function(ev) {
							var oEv = ev || event;
							let disY = (oldTop + (oEv.clientY - oldY)),
								disX = (oldLeft + (oEv.clientX - oldLeft));
							if (disX > oldLeft + oldWidth) {
								disX = oldLeft + oldWidth
							}
							if (disY > oldTop + oldHeight) {
								disY = oldTop + oldHeight
							}
							if (obj.className == 'tl') {
								oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
								oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
								oDiv.style.left = disX + 'px';
								oDiv.style.top = disY + 'px';
							} else if (obj.className == 'bl') {
								oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
								oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
								oDiv.style.left = disX + 'px';
								oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
							} else if (obj.className == 'tr') {
								oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
								oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
								oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
								oDiv.style.top = disY + 'px';
							} else if (obj.className == 'br') {
								oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
								oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
								oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px';
								oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px';
							} else if (obj.className == 't') {
								oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px';
								oDiv.style.top = disY + 'px';
							} else if (obj.className == 'b') {
								oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px';
								oDiv.style.bottom = disY + 'px';
							} else if (obj.className == 'l') {
								oDiv.style.height = oldHeight + 'px';
								oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px';
								oDiv.style.left = disX + 'px';
							} else if (obj.className == 'r') {
								oDiv.style.height = oldHeight + 'px';
								oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px';
								oDiv.style.right = disX + 'px';
							}
						};

						document.onmouseup = function() {
							document.onmousemove = null;
						};
						return false;
					};
				}
				document.getElementById("odiv").onmousedown = function(ev) {
					var oevent = ev || event;
					oevent.preventDefault();

					var distanceX = oevent.clientX - oDiv.offsetLeft;
					var distanceY = oevent.clientY - oDiv.offsetTop;

					document.onmousemove = function(ev) {
						var oevent = ev || event;
						oDiv.style.left = oevent.clientX - distanceX + 'px';
						oDiv.style.top = oevent.clientY - distanceY + 'px';
					};
					document.onmouseup = function() {
						document.onmousemove = null;
						document.onmouseup = null;
					};
				}
			};
		</script>
	</body>
</html>