dragula([document.getElementById("left-events"), document.getElementById("right-events")])
.on('drag', function (el) {
console.log(el);
el.className += ' el-drag-ex-2';
el.className = el.className.replace('ex-moved', '');
})
.on('drop', function (el, target, source, sibling) {
console.log(el);
el.className = el.className.replace('el-drag-ex-2', '');
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', '');
})
.on('cancel', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-2', '');
});

dragula([$('left-rm-spill'), $('right-rm-spill')], { removeOnSpill: true })
.on('drag', function (el) {
console.log(el);
el.className += ' el-drag-ex-3';
}).on('drop', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-3', '');
}).on('cancel', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-3', '');
});

dragula([$('left-rollbacks'), $('right-rollbacks')], { revertOnSpill: true })
.on('drag', function (el) {
console.log(el);
el.className += ' el-drag-ex-4';
}).on('drop', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-4', '');
}).on('cancel', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-4', '');
});

dragula([$('left-lovehandles'), $('right-lovehandles')], {
moves: function (el, container, handle) {
return el;
return handle.className === 'handle';

}
}).on('drag', function (el) {
console.log(el);
el.className += ' el-drag-ex-5';
}).on('drop', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-5', '');
}).on('cancel', function (el) {
console.log(el);
el.className = el.className.replace('el-drag-ex-5', '');
})