18 |
19 |
20 |
21 |
22 |
23 |
You can move these elements between these two containers
24 |
Moving them anywhere else isn't quite possible
25 |
Anything can be moved around. That includes images,
links, or any other nested elements.
26 |
(You can still click on links, as usual!)
27 |
28 |
29 |
30 |
There's also the possibility of moving elements around in the same container, changing their position
31 |
This is the default use case. You only need to specify the containers you want to use
32 |
More interactive use cases lie ahead
33 |
Moving <input/> elements works just fine. You can still focus them, too.
34 |
35 |
36 |
37 |
38 |
39 | dragula([document.getElementById(left), document.getElementById(right)]);
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
As soon as you start dragging an element, a drag event is fired
48 |
Whenever an element is cloned because copy: true, a cloned event fires
49 |
The shadow event fires whenever the placeholder showing where an element would be dropped is moved to a different container or position
50 |
A drop event is fired whenever an element is dropped anywhere other than its origin (where it was initially dragged from)
51 |
52 |
53 |
If the element gets removed from the DOM as a result of dropping outside of any containers, a remove event gets fired
54 |
A cancel event is fired when an element would be dropped onto an invalid target, but retains its original placement instead
55 |
The over event fires when you drag something over a container, and out fires when you drag it away from the container
56 |
Lastly, a dragend event is fired whenever a drag operation ends, regardless of whether it ends in a cancellation, removal, or drop
57 |
58 |
59 |
60 |
61 | dragula([document.getElementById(left), document.getElementById(right)])
62 | .on('drag', function (el) {
63 | el.className = el.className.replace('ex-moved', '');
64 | }).on('drop', function (el) {
65 | el.className += ' ex-moved';
66 | }).on('over', function (el, container) {
67 | container.className += ' ex-over';
68 | }).on('out', function (el, container) {
69 | container.className = container.className.replace('ex-over', '');
70 | });
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
Anxious Cab Driver
79 |
Thriving Venture
80 |
81 |
Calm Clam
82 |
83 |
84 |
Banana Boat
85 |
Orange Juice
86 |
Cuban Cigar
87 |
Terrible Comedian
88 |
89 |
90 |
91 |
92 | dragula([document.getElementById(single)], {
93 | removeOnSpill: true
94 | });
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
Moving items between containers works as usual
103 |
If you try to drop an item outside of any containers, though, it'll retain its original position
104 |
When that happens, a cancel event will be raised
105 |
106 |
107 |
Note that the dragged element will go back to the place you originally dragged it from, even if you move it over other containers
108 |
This is useful if you want to ensure drop events only happen when the user intends for them to happen explicitly, avoiding surprises
109 |
110 |
111 |
112 |
113 | dragula([document.getElementById(left), document.getElementById(right)], {
114 | revertOnSpill: true
115 | });
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
When elements are copyable, they can't be sorted in their origin container
124 |
Copying prevents original elements from being dragged. A copy gets created and that gets dragged instead
125 |
Whenever that happens, a cloned event is raised
126 |
127 |
128 |
Note that the clones get destroyed if they're not dropped into another container
129 |
You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.
130 |
131 |
132 |
133 |
134 | dragula([document.getElementById(left), document.getElementById(right)], {
135 | copy: true
136 | });
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
When elements are copyable, they can't be sorted in their origin container
145 |
Copying prevents original elements from being dragged. A copy gets created and that gets dragged instead
146 |
Whenever that happens, a cloned event is raised
147 |
Note that the clones get destroyed if they're not dropped into another container
148 |
You'll be dragging a copy, so when they're dropped into another container you'll see the duplication.
149 |
150 |
151 |
152 |
153 |
154 |
155 | dragula([document.getElementById(left), document.getElementById(right)], {
156 | copy: function (el, source) {
157 | return source === document.getElementById(left)
158 | },
159 | accepts: function (el, target) {
160 | return target !== document.getElementById(left)
161 | }
162 | });
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
+Move me, but you can use the plus sign to drag me around.
171 |
+Note that handle element in the moves handler is just the original event target.
172 |
173 |
174 |
+This might also be useful if you want multiple children of an element to be able to trigger a drag event.
175 |
+You can also use the moves option to determine whether an element can be dragged at all from a container, drag handle or not.
176 |
177 |
178 |
179 |
180 | dragula([document.getElementById(left), document.getElementById(right)], {
181 | moves: function (el, container, handle) {
182 | return handle.className === 'handle';
183 | }
184 | });
185 |
186 |
187 |
There are a few similar mechanisms to determine whether an element can be dragged from a certain container
(moves), whether an element can be dropped into a certain container at a certain position
(accepts), and whether an element is able to originate a drag event
(invalid).
188 |
189 |
190 |
191 |
192 |
193 |
Clicking on these elements triggers a regular click event you can listen to.
194 |
Try dragging or clicking on this element.
195 |
Note how you can click normally?
196 |
Drags don't trigger click events.
197 |
Clicks don't end up in a drag, either.
198 |
This is useful if you have elements that can be both clicked or dragged.
199 |
200 |
201 |
202 |
203 | dragula([document.getElementById(container)]);
204 |
205 |
206 |
207 |