Matériau angulaire - Déplacer l'élément vers un nouvel emplacement
P粉121081658
2023-09-01 09:12:46
<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>
Utilisez l'attribut [cdkDragFreeDragPosition]
HTML :
TS :