5

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?

Jeff
  • 7,767
  • 28
  • 85
  • 138
  • Are you using dragula or ng2-dragula? – Meir Jan 06 '17 at 19:33
  • do you have ng2-dragula as well? If not, they have a package specifically for angular2: https://github.com/valor-software/ng2-dragula – Meir Jan 06 '17 at 19:47
  • Never did it myself, but I think that the `accepts` method (see here: https://github.com/bevacqua/dragula) is what you're after – Meir Jan 06 '17 at 20:03

2 Answers2

4

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; 
                         }))
Sal-laS
  • 11,016
  • 25
  • 99
  • 169
  • A big thank you, I was pulling my hair off of this one. –  Sep 21 '17 at 12:59
  • How can I get back the drop if api returns false. I'm calling api in onDrop() function, if api function is failed, then I want to move dropped element into original container. – Lead Developer Jan 26 '18 at 15:02
  • 1
    Note that in newer dragula versions, setOptions has been replaced by createGroup(groupName, options) – tzuica Oct 10 '18 at 06:01
0

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);
});
Ghalib Mustafa
  • 11
  • 2