dragula with ionic 2 tutorial Part 2 – dynamic conditional

On my new app there need some conditional when drag and drop, if conditional match with one of element container, then that container would accept any drop element from other, and would allow all element to drag from this container too.

if you didn’t see the part one tutorial please click link below, on this article wouldn’t explain how to make dragula work with ionic.

Part 1 – Add drag and drop on ionic 2 by plugin dragula

if you already read the part 1,  on home.ts page we have add following code.

dragulaService.setOptions('item-list', {
          revertOnSpill: true
        });
dragulaService.dropModel.subscribe((value) => {   
        this.onDropModel(value.slice(1));
      });
      dragulaService.removeModel.subscribe((value) => {
        this.onRemoveModel(value.slice(1));
      });

}

  private onDropModel(args) {
    let [el, target, source] = args;
    // do something else
  }

  private onRemoveModel(args) {
    let [el, source] = args;
    // do something else
  }

so if on some condition we don’t want the container element to drag , we need to add following code to dragulaService.setOptions

moves: function (el, container, handle) {
return handle.className === 'handle';
}

this code mean, when handle(drag element) have class name call “handle”, then this element can be drag. If not, then this element unable to drag.

if to make the code work, on home.html file we need to add [ngClass]=””  to the element you want the drag condition, like [ngClass]=”{‘handle’: dragable }”, that is mean,  if dragable equal to true, then add handle class(able to drag), if not, then remove class handle(not able to drag)

for the condition to drop or don’t want any element to drop on special container, then we add follow code to dragulaService.setOptions

accepts: function (el, target, source, sibling) {

if(target.className === 'container'){
  return true;
}else{
  return false;
}
       // elements can be dropped in any of the `containers` by default
    }

this code mean, only container class name match "container", the drag element can be drop into it.

target parameter on accepts function can give us class name of our target container.

so on home.html file we need to  add the [ngClass]=”” to the element that we want the drop condition, just like what we did on drag condition.

[ngClass]=”{‘container‘: dropable }”,   if dropable equal to true, then drag element can be drop to this container, if equal to false,  then this container would not accepts any drag elements.

here is final typescript code


dragulaService.setOptions('item-list', {
      revertOnSpill: true,
      moves: function(el, container, handle) {
        return handle.className === 'handle';
      },
      accepts: function(el, target, source, sibling) {

        if (target.className === 'container') {
          return true;
        } else {
          return false;
        }
        // elements can be dropped in any of the `containers` by default
      }
    });

dragula stil have a lot of events, you can click ngdragula offical github

hope this will help.

Leave a Reply

Your email address will not be published. Required fields are marked *