2017-01-06 13 views
5

Mam aplikację angular2 z typescript. Używam ng2-dragula, aby utworzyć aplikację przeciągania i upuszczania.Dragula: przywrócić spadek w ng2-dragula

ja requiered się, sprawdzić stan i przywrócić przeciągnij jeśli warunek jest fałszywy, a wiem z here, że revertOnSpill że revertOnSpill:true można umieścić element z powrotem do swojego pierwszego miejsca.

Ale, Nie wiem, jak to jest możliwe wng2-dragula. Zawieszam to w onDrop. Oto kod

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 
} 

i Oto kod html:

<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 jest:

"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" 
    } 

jest problem, nie wiem jak odwołać kropla?

+0

Używasz Dragula lub NG2-Dragula? – Meir

+0

czy masz też ng2-dragula? Jeśli nie, to mają pakiet specjalnie dla angular2: https://github.com/valor-software/ng2-dragula – Meir

+0

Nigdy tego nie zrobiłem, ale myślę, że metoda "accepts" (zobacz tutaj: https: // github .com/bevacqua/dragula) jest to, o co prosisz, – Meir

Odpowiedz

4

Istnieje właściwość o nazwie logiczną moves, który kontroluje IFF element jest ruchomy czy nie

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

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

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

Wielkie dzięki, odgarnęłam włosy z tego. – trichetriche

+0

Jak mogę odzyskać spadek, jeśli funkcja API zwraca wartość false. Wywołuję funkcję api w funkcji onDrop(), jeśli funkcja API nie działa, a następnie chcę przenieść upuszczony element do oryginalnego kontenera. – hkg328