Day21-30/code/web1807/homework06.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#one, #two, #three {
				width: 200px;
				height: 200px;
				position: fixed;
			}
			#one {
				left: 50px;
				top: 50px;
				background-color: lightpink;
			}
			#two {
				left: 200px;
				top: 150px;
				background-color: lightgreen;
			}
			#three {
				right: 30px;
				top: 100px;
				background-color: lightgoldenrodyellow;
			}
		</style>
	</head>
	<body>
		<div id="one"></div>
		<div id="two"></div>
		<div id="three"></div>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				makeDraggable($('#one'));
				makeDraggable($('#two'));
				makeDraggable($('#three'));
			});
			
			var draggables = [];
			
			function makeDraggable(jqElem) {
				draggables.push(jqElem);
				jqElem.on('mousedown', function(evt) {
					this.isMouseDown = true;
					this.oldX = evt.clientX;
					this.oldY = evt.clientY;
					this.oldLeft = parseInt($(evt.target).css('left'));
					this.oldTop = parseInt($(evt.target).css('top'));
					$.each(draggables, function(index, elem) {
						elem.css('z-index', '0');
					});
					$(evt.target).css('z-index', '99');
				})
				.on('mousemove', function(evt) {
					if (this.isMouseDown) {
						var dx = evt.clientX - this.oldX;
						var dy = evt.clientY - this.oldY;
						$(evt.target).css('left', this.oldLeft + dx + 'px');
						$(evt.target).css('top', this.oldTop + dy + 'px');
					}
				})
				.on('mouseup', function(evt) {
					this.isMouseDown = false;
				})
				.on('mouseout', function(evt) {
					this.isMouseDown = false;
				});
			}
		</script>
	</body>
</html>