Search code examples
javascriptdrag-and-dropcopydragula

Dragula Copy and removeOnSpill

I'm trying to use the Dragula Drag & Drop library to Clone elements into a target container AND allow the user to remove cloned elements from the Target Container by drag & dropping them outside of the target container (spilling).

Using the examples provided I have this:

dragula([$('left-copy-1tomany'), $('right-copy-1tomany')], {
   copy: function (el, source) {
      return source === $('left-copy-1tomany');
   },
   accepts: function (el, target) {
      return target !== $('left-copy-1tomany');
   } 
});
dragula([$('right-copy-1tomany')], { removeOnSpill: true });

Which does not work - it seems that 'removeOnSpill' simply doesn't work if the container accepts a copy.

Does anybody know what I am not doing, doing wrong or if there is a work-around?

TIA!

Solution

  • From the dragula documentation
    options.removeOnSpill

    By default, spilling an element outside of any containers will move the element back to the drop position previewed by the feedback shadow. Setting removeOnSpill to true will ensure elements dropped outside of any approved containers are removed from the DOM. Note that remove events won't fire if copy is set to true.