-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
50 lines (42 loc) · 1.73 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<title>Draggable Dialog</title>
</head>
<body>
<p>This is a demo page of a library that turn html element draggable</p>
<div class="btn-group" role="group" aria-label="Basic example">
<button id="start-button" type="button" class="btn btn-primary">
Show dialog
</button>
<button type="button" class="btn btn-primary">
<a rel="noreferrer" target="_blank" href="https://github.com/raulpy271/DraggableDialog/blob/master/index.html">
Show source code
</a>
</button>
</div>
<div id="dialog">
<div id="title" class="title">
<p id="title-text">Loren Ipsum</p>
<button id="close-button" type="button" class="btn-close" aria-label="Close"/>
</div>
<div class="dialog-content">
<p>Mussum Ipsum, cacilds vidis litro abertis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo!</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/gh/raulpy271/DraggableDialog@master/dist/Draggable.js"></script>
<script>
new Draggable({
"dialogId" : "dialog",
"elementThatCaptureTheClick" : "title",
"centerElement" : true,
"hideButtonId" : "close-button",
"showButtonId" : "start-button"
})
</script>
</body>
</html>