CODEWITHSUNDEEP
javascriptdrag-and-dropcopydragula
Serexx
Serexx

Reputation: 1250

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!

Upvotes: 6

Views: 6989

Answers (3)

Simona Adriani
Simona Adriani

Reputation: 571

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.

Upvotes: 2

Nicholas Tsaoucis
Nicholas Tsaoucis

Reputation: 1397

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.

Upvotes: 8

Gifford.Haynes
Gifford.Haynes

Reputation: 74

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.

Upvotes: 0

Related Questions