Matériau angulaire - Déplacer l'élément vers un nouvel emplacement
P粉121081658
P粉121081658 2023-09-01 09:12:46
0
1
535
<p>J'ai besoin d'aide pour le glisser-déposer de matériaux angulaires</p> <p>L'idée est que je peux déplacer un bloc noir sur l'écran le long de l'axe Y, pour cela j'utilise le glisser-déposer Angular Material, pour cela j'ai 3 méthodes onDragMoved, onDragStart, onDragEnd. Lorsque je relâche la souris, j'ajouterai 100 px à la hauteur et lorsque je veux commencer à déplacer le bloc pour la deuxième fois, il devrait commencer à bouger de l'endroit où il s'est arrêté la dernière fois, mais cela ne se produit pas, pour une raison quelconque, les contractions se produisent < /p> <p>La vidéo en question - https://dropmefiles.com/0XFU6</p> <pre class="brush:php;toolbar:false;">onDragMoved(événement : CdkDragMove) { console.log('движемся') console.log (événement) console.log('neeeew coord', this.qwwqwqw) // if(this.qwwqwqw != null && event != null) { // événement.distance.y = this.qwwqwqw // event.pointerPosition.y = this.qwwqwqw // this.qwwqwqw = null ; // } } onDragStart (événement : CdkDragMove) { console.log('Кнопка мыши зажата'); console.log(événement.distance) } onDragEnd (événement : CdkDragMove) { console.log('Кнопка мыши отпущена'); console.log (événement) const y = événement.distance.y + 100 ; // 100 const element = event.source.element.nativeElement; element.style.transform = `translate3d(0, ${y}px, 0)`; // Transformation CSS element.style.height = this.originalHeight + 'px'; // vous avez votre bloc événement.distance.y = y; ceci.qwwqwqw = y; }</pré> <pre class="brush:php;toolbar:false;"><div class="example-box" cdkDragLockAxis="y" cdkDrag (cdkDragMoved)="onDragMoved($event)" (cdkDragStarted) )="onDragStart($événement)" (cdkDragEnded)="onDragEnd($événement)"> Coordonnées : {{ posX }}, {{ posY }} </div></pre> <p>[Entrez la description de l'image ici](https://i.stack.imgur.com/RmWP2.png)</p> <p>J'ai essayé le débogage, j'ai transmis les nouvelles coordonnées à la méthode onDragMoved, mais dans le deuxième événement, elles ont été mises à jour avec des coordonnées aléatoires</p>
P粉121081658
P粉121081658

répondre à tous(1)
P粉391955763

Utilisez l'attribut [cdkDragFreeDragPosition]

HTML :

<div class="example-box" cdkDragLockAxis="y" cdkDrag [cdkDragFreeDragPosition]="dragPosition" (cdkDragEnded)="onDragEnd($event)">
    Координаты: {{ posX }}, {{ posY }}
</div>

TS :

dragPosition = { x: 0, y: 0 };

onDragEnd(event: CdkDragMove) {
    this.dragPosition = { x: event.distance.x, y: event.distance.y + 100 }
}
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal