-
Notifications
You must be signed in to change notification settings - Fork 0
/
Index.html
57 lines (43 loc) · 2 KB
/
Index.html
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
<!DOCTYPE html>
<html>
<head>
<title>VDWWD - Draggable Div with pure JavaScript</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body style="background-color: #4b4d66">
<!-- van der Waal Webdesign -->
<!-- https://www.vanderwaal.eu -->
<div class="DraggableDiv" id="DraggableDiv1">
<div class="Header" id="DraggableDiv1_Header">
Draggable Div 1
</div>
<div class="Content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="DraggableDiv" id="DraggableDiv2">
<div class="Content">
<strong>Draggable Div 2 - No Header</strong>
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div class="DraggableDiv" id="DraggableDiv3">
<div class="Content">
Drag me
<br />
<br />
<a target="_blank" href="https://www.vanderwaal.eu">
<img src="images/vdwwd.png" alt="van der Waal Webdesign" title="van der Waal Webdesign" class="img-fluid" />
</a>
</div>
</div>
<link rel="stylesheet" href="StyleSheet.css" />
<script src="draggable-div-javascript-only.js" /></script>
<script>
draggableDiv(document.getElementById("DraggableDiv1"));
draggableDiv(document.getElementById("DraggableDiv2"));
draggableDiv(document.getElementById("DraggableDiv3"));
</script>
</body>
</html>