forked from bevacqua/dragula
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
155 lines (155 loc) · 5.89 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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<!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([document.getElementById(left), document.getElementById(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([document.getElementById(left), document.getElementById(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([document.getElementById(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 outside 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([document.getElementById(left), document.getElementById(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([document.getElementById(left), document.getElementById(right)], { copy: true });
</code>
</pre>
</div>
<div class='parent'>
<label for='hy'>Drag handles float your cruise?</label>
<div class='wrapper'>
<div id='left5' class='container'>
<div><span class='handle'>+</span>Move me, but you can use the plus sign to drag me around.</div>
</div>
<div id='right5' class='container'>
</div>
</div>
<pre>
<code>
dragula([document.getElementById(left), document.getElementById(right)], {
moves: function (el, container, handle) {
return handle.className === 'handle';
}
});
</code>
</pre>
</div>
<div class='parent'>
<label><strong>Click or Drag!</strong> Fires a click when the mouse button is released within <code>delay</code>, otherwise a drag event is fired.</label>
<div class='wrapper'>
<div id='single2' 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([document.getElementById(single)], { delay: 200 });
</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>