master

分支 (2)

管理

管理

master

dev_test

web-test
/
让div在父div中拖动.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#big {
				border: 1px solid #FF3300;
				width: 300px;
				height: 300px;
				position: relative;
			}

			#small {
				background: #99CC00;
				width: 50px;
				height: 50px;
				position: absolute;
				cursor: pointer;
			}
		</style>
		<script language="javascript">
			function small_down(e) {
				var obig = document.getElementById("big");
				var osmall = document.getElementById("small");
				var e = e || window.event;
				/*用于保存小的div拖拽前的坐标*/
				osmall.startX = e.clientX - osmall.offsetLeft;
				osmall.startY = e.clientY - osmall.offsetTop;
				/*鼠标的移动事件*/
				document.onmousemove = function(e) {
					var e = e || window.event;
					osmall.style.left = e.clientX - osmall.startX + "px";
					osmall.style.top = e.clientY - osmall.startY + "px";
					/*对于大的DIV四个边界的判断*/
					if (e.clientX - osmall.startX <= 0) {
						osmall.style.left = 0 + "px";
					}
					if (e.clientY - osmall.startY <= 0) {
						osmall.style.top = 0 + "px";
					}
					if (e.clientX - osmall.startX >= 250) {
						osmall.style.left = 250 + "px";
					}
					if (e.clientY - osmall.startY >= 250) {
						osmall.style.top = 250 + "px";
					}
				};
				/*鼠标的抬起事件,终止拖动*/
				document.onmouseup = function() {
					document.onmousemove = null;
					document.onmouseup = null;
				};
			}
		</script>
	</head>
	<body>
		<div id="big">
			<div id="small" onmousedown="small_down(event)"></div>
		</div>
	</body>
</html>