Dragula :revert drop in ng2-dragula

Question

i have an angular2 app with typescript. I am using ng2-dragula to make a drag and drop application.

I am requiered to, check a condition, and revert the drag if the condition is false, and I know from here, that revertOnSpill that revertOnSpill:true can put the element back to its first place.

But, I don't know how is it possible in ng2-dragula. i implimented it in the onDrop. here is the code

 constructor() {

              dragulaService.drop.subscribe((value) => {
                  this.onDrop(value.slice(1));
              });

                dragulaService.setOptions('second-bag', {
                  removeOnSpill: true
              });
 }

private onDrop(args) {
   bla
   bla
   bla
   if(err.status=="404")                                                               
          this.dragulaService.removeModel;
         // this.dragulaService.cancel; also tried but did not work   
}

and here is the html code:

<div   id="toPlay" class="playBox roundedBox" [dragula]="'second-bag'">
    <img class="w3-animate-top" [src]="sax_path" alt="sax" id="saxsophone"/>
    <img class="w3-animate-top" [src]="drum_path" alt="drum" id="drum"/> 
</div>
<div   id="scene"  [dragula]="'second-bag'">

</div> 

Package.json is:

 "dependencies": {
    "dragula": "^3.7.2"
  },
  "peerDependencies": {
    "@angular/common": "^2.0.0",
    "@angular/core": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/forms": "^2.0.0"
  },
  "devDependencies": {
    "angular-cli": "1.0.0-beta.22-1",
    "typescript": "2.0.10"
  }

the problem is, i don't know how to cancel the drop?

Answer 1

There is a property called boolean moves, which controls iff an element is movable or not

this.dragulaService.setOptions('second-bag', {

        moves:  (el, container, handle) =>{

                             if(YourCondition)
                                     //return true;
                             else
                                     //return false; 
                         }))

Answer 2

I know its pretty old post but still if someone is searching for this. If you want to use the native Dragula events to revert the drop. The following piece of code can help you revert the last drop asynchronously to its previous location. Here, when the drag starts, we are saving the parent and parent sibling details in the global variable. And then using those details on drop to revert it asynchronously

var originalParent, originalNextSibling;
drake.on('drag', function (el, source) {
    // Store the original parent and next sibling of the dragged element
    originalParent = el.parentNode;
    originalNextSibling = el.nextElementSibling;
});

drake.on('drop', function (el, target, source, helper) {
    setTimeout(function () {
        // move back the card
        if (originalNextSibling) {
            originalParent.insertBefore(el, originalNextSibling);
        } else {
            originalParent.appendChild(el);
        }
    }, 2000);
});