CODEWITHSUNDEEP
angulardrag-and-dropionic3dragulang2-dragula
Natanael
Natanael

Reputation: 1346

Ng-Dragula and drop more detailed constraints

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:

I don't want user can move itens:

How can I set this detailed constraints?

Upvotes: 1

Views: 1331

Answers (1)

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

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.

Upvotes: 1

Related Questions