6

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!

1
  • It does say in the docs that remove events won't fire if copy is set to true. However, I wonder if @bevacqua might be able to suggest a workaround for us? Dec 4, 2015 at 12:52

3 Answers 3

8

I came here after looking for a while for a solution to a similar issue using the 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've got 4 divs that can all drag into one which has the id of wallet They are all part of the wallet-bag using this code, they can all copy into the wallet, not copy between each other, and you can remove them from the wallet using the spill but not from the others.

I'm posting my solution as it may also help someone.

0
2

Ok, so the general answer I came trough is that:

you can have 'removeOnSpill' working - even with 'copy' option set to true - , only if you set the 'copy' option applying ONLY when the 'source' container IS NOT the one you are trying to remove elements from.

In my case I had 3 containers from which I can drag in another one called 'to_drop_to'. Those container have all id starting with 'drag'.

So I set:

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 this worked for me.

Hope it helps.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.