Dragula Copy and Delete OnSpill

Question

I am trying to use the Dragula Drag and Drop library to clone items into a target container AND allow the user to remove cloned items from the Target Container by dragging them outside the target container (spill).

Using the above examples, I have the following:

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 }); 

What doesn't work - it seems that "removeOnSpill" just doesn't work if the container accepts a copy.

Does anyone know what I'm doing, doing wrong, or if there is a workaround?

TIA!

Answer 1

From the dragula documentation
options.removeOnSpill

By default, moving an item outside of any containers will move the item back to the drop position, viewed by the shadow feedback. Setting removeOnSpill to true will cause items to be omitted outside any approved containers that are removed from the DOM. Note that deleting events will not fire if the copy is set to true.

Answer 2

I came here after some time to solve a similar problem using ng2-dragula for angular2.

  dragulaService.setOptions('wallet-bag', { removeOnSpill: (el: Element, source: Element): boolean => { return source.id === 'wallet'; }, copySortSource: false, copy: (el: Element, source: Element): boolean => { return source.id !== 'wallet'; }, accepts: (el: Element, target: Element, source: Element, sibling: Element): boolean => { return !el.contains(target) && target.id === 'wallet'; } }); 

I have 4 divs that can be dragged into one that has the wallet identifier. They are all part of the wallet-bag using this code, they can all be copied to the wallet, not copied to each other, and you can remove them from the wallet using spill but not from others.

I am posting my solution as it can help someone.

Answer 3

Ok, so the general answer I received is this:

you can have "removeOnSpill" even if the "copy" option is set to true - only if you set the "copy" parameter, applying ONLY when the "source" container is NOT the one you are trying to remove from.

In my case, I had 3 containers from which I can drag another one called 'to_drop_to'. These containers have all identifiers starting with drag and drop.

So, I installed:

 var containers = [document.querySelector('#drag1'), document.querySelector('#drag2'), document.querySelector('#drag3'), document.querySelector('#to_drop_to')]; dragula(containers, { accepts: function (el, target, source, sibling) { return $(target).attr('id')=="gadget_drop"; // elements can be dropped only in 'to_drop_to' container }, copy: function(el,source){ return $(source).attr('id').match('drag'); //elements are copied only if they are not already copied ones. That enables the 'removeOnSpill' to work }, removeOnSpill: true } 

and it worked for me.

Hope this helps.