web-dev-qa-db-fra.com

Annuler glisser sur la touche Angular cdk drag and drop

Je travaille dans une application qui implémente le nouveau glisser-déposer du matériau angulaire CDK et j'essaie d'annuler l'événement de glisser de l'élément en appuyant sur Esc. Je commence à faire glisser l'élément, mais si j'appuie sur Esc pendant que je suis en faisant glisser l'élément, il devrait revenir à la position d'où je commence à le faire glisser, jusqu'à présent, je n'ai pas trouvé le moyen de le faire, est-ce que quelqu'un sait comment je peux le faire? Il n'y a rien dans la documentation de cdk à ce sujet. J'essaie de faire quelque chose comme ça.

Modèle 

<div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
  <div class="example-box" *ngFor="let movie of movies" (cdkDragEnded)="onDragEnded($event)" cdkDrag>{{movie}}</div>
</div>

Composant Ts 

onDragEnded(event: CdkDragEnd) {
  console.log(event)
  event.source.element.nativeElement.style.transform = 'none';
  const source: any = event.source;
  source._passiveTransform = { x: 0, y: 0 };
}

mais pas de succès jusqu'à présent.

javascriptangularangular-materialangular-cdk
6
Miguel Angel Frias

J'ai aussi fait face à ce problème pendant longtemps. Enfin, je pourrais résoudre ce problème en envoyant un événement mouseup qui agira comme l'utilisateur relâchant la souris.

@HostListener('window:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
    if (event.key === 'Escape') {
        document.dispatchEvent(new Event('mouseup'));
    }
}

Ceci est une solution extrêmement hacky et vient avec ses inconvénients. En fait, vous n'annulez pas le glisser-déposer mais vous le laissez tomber. Ce qui signifie que si vous survolez une cdkDropList ou si une personne est active, elle déclenchera le cdkDropListDropped emmiter pour cette liste. Quelque chose que vous pouvez facilement contourner en ajoutant un drapeau.

private _canceledByEsq = false;

@HostListener('window:keyup', ['$event'])
handleKeyboardEvent(event: KeyboardEvent) {
    if (event.key === 'Escape') {
        this._canceledByEsq = true;
        document.dispatchEvent(new Event('mouseup'));
    }
}

handleDrop() {
    if (!this._canceledByEsq) {
        // Do my data manipulations
    }
}

J'espère que cela vous aide ... :)

2
danizep

Vous pouvez déplacer l'élément déplacé vers une position en utilisant:

event['source']['element']['nativeElement']['style']['transform'] = 'translate3d(0,0,0)';
event['source']['_dragRef']['_activeTransform'] = {x: 0, y: 0};
event['source']['_dragRef']['_passiveTransform'] = {x: 0, y: 0};
0
Alessio Pragliola - Creact