[TS][Angular][Angular Material] Drag and Drop

3 views

Skip to first unread message

Jérémy Chamboultou

unread,

Dec 3, 2018, 9:13:19 AM12/3/18

to FrAngular - AngularJS en français

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

Code :

1
2
3
4
5

 
<div class="ouija" cdkDrop>
  <img src="./assets/goute.png" width="7%" [ngStyle]="{transform: gets()}" cdkDrag/>
  </div>
<button class="move" (click)="move()">Move</button>

Voici également mon css :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
@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%;
}