-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
71 lines (69 loc) · 2.46 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<!doctype html>
<meta charset='utf-8'>
<link href='dist/dragon.css' rel='stylesheet' type='text/css'/>
<link href='example/example.css' rel='stylesheet' type='text/css'/>
<title>dragon</title>
<body>
<h1>Dragon DEMO</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class='examples'>
<div class='parent'>
<label for='hy'>Move stuff between these two containers. Note how the stuff gets inserted near the mouse
pointer? Great stuff.</label>
<div class='wrapper'>
<div id='left-defaults' class='container'>
<div id="test1">You can move these elements between these two containers</div>
<div id="test2">Moving them anywhere else isn't quite possible</div>
<div>Anything can be moved around. That includes images, <a href='https://github.com/luckylooke/dragon'
target="_blank">links</a>, or any other
nested elements.
<div class='image-thing'><img src='resources/toothless.jpg' alt='dragon'/></div>
<sub>(You can still click on links, as usual!)</sub>
</div>
</div>
<div id='right-defaults' class='container'>
<div>There's also the possibility of moving elements around in the same container, changing their
position
</div>
<div>This is the default use case. You only need to specify the containers you want to use</div>
<div>More interactive use cases lie ahead</div>
<div>Moving <code><input/></code> elements works just fine. You can still focus them, too. <input
placeholder='See?'/></div>
<div>Make sure to check out the <a href='https://github.com/luckylooke/dragon#readme'>documentation on
GitHub!</a></div>
</div>
</div>
<pre>
<code>
new Dragon( document.getElementsByClassName('container') );
</code>
</pre>
</div>
</div>
</body>
<script src='dist/dragon.js'></script>
<script src='example/example.js'></script>