Bonjour,
Je réalise en ce moment un projet angular où j'utilise Angular material et plus particulièrement son drag and drop , j'ai fais ça, et je souhaiterai conserver le fais de pouvoir drag and drop la goutte avec la souris, mais aussi pouvoir la déplacer en TypeScript, je voudrais q'en cliquant sur le petit boutton moove en bas à droite, la goutte se déplace toute seule pour pointer une lettre. Avez-vous des idées pour la déplacer juste en TS en utilisant ou non Angular Material.
Voici ma page html (app.component.ts) :
Voici également mon css :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4 <div class="ouija" cdkDrop> <img src="./assets/goute.png" width="7%" [ngStyle]="{transform: gets()}" cdkDrag/> </div> <button class="move" (click)="move()">Move</button>
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 @import "~@angular/material/prebuilt-themes/purple-green.css"; html, body{ background-color: black; padding: 0; margin: 0; width: 100%; height: 100%; } .ouija{ height: 100%; background-image: url("./assets/ouija.jpg"); background-repeat: no-repeat; -webkit-background-size: cover; background-size: 100% 100%; } .move{ position: absolute; right: 2%; bottom: 2%; }
Merci d'avance.
Jérémy
Partager