Reputation: 8431
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?
Upvotes: 5
Views: 3999
Reputation: 11
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);
});
Upvotes: 0