old_difbit.github.io/page2.html at master · difbit/old_difbit.github.io · 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=0.7">
<html>
<style>
#div_drag {
    position: absolute;
}
</style>
	<title>Page 2</title>
	<body style="background-color:Tan;">
	<div id="page_2_content">
		<center>
		<h1 style="background-color:Red;">Welcome to Page 2</h1>
		<div id="div_drag">Click here to move
		</div>
		</br>
		<a href="index.html">Return to home page</a>
		</center>
	</div>
	</body>

<script>
dragElement(document.getElementById("div_drag"));

function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (document.getElementById(elmnt.id + "header")) {
        document.getElementById(elmnt.id +
	"header").onmousedown = dragMouseDown;
    } else {
        elmnt.onmousedown = dragMouseDown;
    }

	function dragMouseDown(e) {
	    e = e || window.event;
	    e.preventDefault();
	    pos3 = e.clientX;
	    pos4 = e.clinetY;
	    document.onmouseup = closeDragElement;
	    document.onmousemove = elementDrag;
	}

	function elementDrag(e) {
	    e = e || window.event;
	    e.preventDefault();
	    pos1 = pos3 - e.clinetX;
	    pos2 = pos4 - e.clinetY;
	    pos3 = e.clientX;
	    pos4 = e.clientY;
	    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
	    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
	}

	function closeDragElement() {
	    document.onmouseup = null;
	    document.onmousemove = null;
	}
}

</script>

</html>