Ng-Dragula and drop more detailed constraints

Question

I'm developing an app using Ionic 3 and Angular 4 frameworks and Ng-Dragula library.

I need more detailed control over drag and drop of elements provided by Ng-Dragula.

For example, I have three columns.

I want the user can move itens:

• From first column to second column;
• From second column to third column;
• From third column to second column.

I don't want user can move itens:

• From first column to third column.
• From second column to first column.
• From third column to first column.

How can I set this detailed constraints?

Answer 1

You can set options on each container (each column), containing an 'accepts' function that determines whether a particular item can be dropped on a particular container, in a particular position.

For example,

dragulaService.setOptions('column-1', {
      accepts: function(el, target, source, sibling) {
          // return true to allow drop, false to disallow
      }
    })

According to the documentation at https://github.com/bevacqua/dragula#optionsaccepts, the arguments to this function are:

• el - the item that is being dropped

• target - the container on whichthe item is being dropped

• source - the container from which the item was dragged

• sibling - the item in the target container before which the item is being dropped, null if being dropped as last item

You would return true to allow the drop, false to prevent it.