Note !Move stuff between these two containers. Note how the stuff gets inserted near the mouse pointer? Great stuff.
<input/>
elements works just fine. You can still focus them, too.
dragula([document.getElementById(left), document.getElementById(right)]);
Note !There are plenty of events along the lifetime of a drag event. Check out all of them in the docs!
drag
event is firedcopy: true
, a cloned
event firesshadow
event fires whenever the placeholder showing where an element would be dropped is moved to a different container or positiondrop
event is fired whenever an element is dropped anywhere other than its origin (where it was initially dragged from)remove
event gets firedcancel
event is fired when an element would be dropped onto an invalid target, but retains its original placement insteadover
event fires when you drag something over a container, and out
fires when you drag it away from the containerdragend
event is fired whenever a drag operation ends, regardless of whether it ends in a cancellation, removal, or drop
dragula([document.getElementById(left), document.getElementById(right)])
.on('drag', function (el) {
el.className = el.className.replace('ex-moved', '');
}).on('drop', function (el) {
el.className += ' ex-moved';
}).on('over', function (el, container) {
container.className += ' ex-over';
}).on('out', function (el, container) {
container.className = container.className.replace('ex-over', '');
});
Note ! Need to be able to quickly delete stuff when it spills out of the chosen containers? Note how you can easily sort the items in any containers by just dragging and dropping.
dragula([document.getElementById(single)], {
removeOnSpill: true
});
Note ! By default, dropping an element outside of any known containers will keep the element in the last place it went over. You can make elements go back to origin if they're dropped outside of known containers, too.
cancel
event will be raised
dragula([document.getElementById(left), document.getElementById(right)], {
revertOnSpill: true
});
Note !Copying stuff from only one of the containers and sorting on the other one? No problem!
cloned
event is raised
dragula([document.getElementById(left), document.getElementById(right)], {
copy: function (el, source) {
return source === document.getElementById(left)
},
accepts: function (el, target) {
return target !== document.getElementById(left)
}
});
Note ! Drag handles float your cruise?
handle
element in the moves
handler is just the original event target.moves
option to determine whether an element can be dragged at all from a container, drag handle or not.
dragula([document.getElementById(left), document.getElementById(right)], {
moves: function (el, container, handle) {
return handle.className === 'handle';
}
});
Click or Drag! Fires a click when the mouse button is released before a mousemove
event, otherwise a drag event is fired. No extra configuration is necessary.
click
event you can listen to.
dragula([document.getElementById(container)]);