master

分支 (1)

管理

管理

master

js
/
dragdrop.html

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<div id="box"> </div>

	<script type="text/javascript">
		var box = document.getElementById('box');
		box.style.position = "absolute";
		box.style.width  = "160px";
		box.style.height = "160px";
		box.style.backgroundColor = "red";
		var mx, my, ox, oy;

		function e(event) {
			if (!event) {
				event = window.event;
				event.target = event.srcElement;
				event.layerX = event.offsetX;
				event.layerY = event.offsetY;
			}
			event.mx = event.pageX || event.clientX + document.body.scrollLeft;
			event.my = event.pageY || event.clientY + document.body.scrollTop;
			return event;
		}


		document.onmousedown = function(event) {
			event = e(event);
			o = event.target;
			ox = parseInt(o.offsetLeft);
			oy = parseInt(o.offsetTop);
			mx = event.mx;
			my = event.my;
			document.onmousemove = move;
			document.onmouseup = stop;
		}

		function move(event) {
			event = e(event);
			o.style.left = ox+event.mx-mx + "px";
			o.style.top = oy+event.my-my + "px";
		}

		function stop = function() {
			event = e(event);
			ox = parseInt(o.offsetLeft);
			oy = parseInt(o.offsetTop);
			mx = event.mx;
			my = event.my;
			o = document.onmousemove = document.onmouseup = null;
		}


	</script>
</body>
</html>