JS-POPUP-/index.html at master · mikadev/JS-POPUP- · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<html>
<head>
	<title></title>
	<style type="text/css">
		.red{
			background-color: red;
			height: 250px;
			width: 250px;
			position: absolute;
			top: 0px;
			left: 0px;
		}
	</style>
</head>
<body>

<div class="red" style="top:0px;left:0px;"></div>
</body>
<script type="text/javascript">
	var el = document.getElementsByTagName('div')[0];
	var ix  = 0;
	var iy = 0;
	var down = false;
	el.addEventListener('mousedown', function (e) {
		ix = e.pageX-parseInt(el.style.left);
		iy = e.pageY-parseInt(el.style.top);
		down = true;
		console.log('dragstart');
		document.addEventListener('mousemove', moved, false);
	}, false);
	document.addEventListener('mouseup', function (e) {
		document.removeEventListener('mousemove', moved);
		down = false;
		console.log('dragend');
	}, false);

	function moved (e) {
		if(!down) return false;
		el.style.left = e.pageX-ix;
		el.style.top = e.pageY-iy;
		console.log('drag');
	}
</script>
</html>