forked from bevacqua/dragula
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
118 lines (118 loc) · 4.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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!doctype html>
<link href='dist/dragula.css' rel='stylesheet' type='text/css' />
<link href='example/example.css' rel='stylesheet' type='text/css' />
<title>dragula</title>
<h1>dragula</h1>
<h3>Drag and drop so simple it hurts</h3>
<a href='https://github.com/bevacqua/dragula'>
<img class='gh-fork' src='https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png' />
</a>
<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='left1' class='container'>
<div>Move me, but you can only drop me in one of these containers.</div>
<div>If you try to drop me somewhere other than these containers, I'll just come back.</div>
<div>Item 3.</div>
<div>Item 6.</div>
</div>
<div id='right1' class='container'>
<div>You can drop me in the left container, otherwise I'll stay here.</div>
<div>Item 4.</div>
<div>Item 5.</div>
</div>
</div>
<pre>
<code>
dragula([left, right]);
</code>
</pre>
</div>
<div class='parent'>
<label for='hy'>Add some fantastic events!</label>
<div class='wrapper'>
<div id='left3' class='container'>
<div>Move me, but you can only drop me in one of these containers.</div>
<div>If you try to drop me somewhere other than these containers, I'll just come back.</div>
<div>Item 3.</div>
<div>Item 6.</div>
</div>
<div id='right3' class='container'>
<div>You can drop me in the left container, otherwise I'll stay here.</div>
<div>Item 4.</div>
<div>Item 5.</div>
</div>
</div>
<pre>
<code>
dragula([left, right]).on('drag', function (el) {
el.className = el.className.replace(' animazing', '');
}).on('drop', function (el) {
setTimeout(function () {
el.className += ' animazing';
}, 0);
});
</code>
</pre>
</div>
<div class='parent'>
<label for='hy'>Need to be able to quickly delete stuff when it spills out of the chosen containers?</label>
<div class='wrapper'>
<div id='single1' class='container'>
<div>Move me, but you can only drop me somewhere in this container.</div>
<div>If you try to drop me somewhere other than here, I'll die a fiery death.</div>
<div>Item 3.</div>
<div>Item 6.</div>
<div>Item 4.</div>
<div>Item 5.</div>
</div>
</div>
<pre>
<code>
dragula([single], { removeOnSpill: true });
</code>
</pre>
</div>
<div class='parent'>
<label for='hy'>By default, dropping an element outside of any known containers will keep the element in the last place it hovered over. You can make elements go back home if they're dropped outisde of known containers, too.</label>
<div class='wrapper'>
<div id='left4' class='container'>
<div>Move me, but you can only drop me in one of these containers.</div>
<div>If you try to drop me somewhere other than these containers, I'll just come back.</div>
<div>Item 3.</div>
<div>Item 6.</div>
</div>
<div id='right4' class='container'>
<div>You can drop me in the left container, otherwise I'll stay here.</div>
<div>Item 4.</div>
<div>Item 5.</div>
</div>
</div>
<pre>
<code>
dragula([left, right], { revertOnSpill: true });
</code>
</pre>
</div>
<div class='parent'>
<label for='hy'>Copying stuff is great too</label>
<div class='wrapper'>
<div id='left2' class='container'>
<div>Move me, but you can only drop me in one of these containers.</div>
<div>If you try to drop me somewhere other than these containers, I'll just come back.</div>
</div>
<div id='right2' class='container'>
<div>You can drop me in the left container, otherwise I'll stay here.</div>
</div>
</div>
<pre>
<code>
dragula([left, right], { copy: true });
</code>
</pre>
</div>
</div>
<h3>Get it on GitHub! <a href='https://github.com/bevacqua/dragula'>bevacqua/dragula</a></h3>
<script src='dist/dragula.js'></script>
<script src='example/example.js'></script>