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?
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;
}))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With