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

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

@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

Bonjour,

Il te faut au préalable la position des lettres (dans un tableau, ça me semble pas mal). Quand tu clique sur le move, tu n'as plus qu'à aller chercher une valeur aléatoire dans ton tableau des lettres et update la position de ta goute. Aucune idée de comment le faire avec Angular material vu que je ne l'utilise pas.

ET avec juste Angular ? Pour ce qui est des position, en faisant f12, en selectionnant la goutte, puis en la bougeant, on peux voir bouger les px de ce style : 

transform: translate3d(578px, 213px, 0px);

Ca permet d'obtenir la position de chaques lettres, après je ne pense pas que ce soit responsive, comment le faire ressponsive ? avec de % ? Pour le moment ce que je voudrais c'est que la goutte se déplasse sur le A quand on appuis sur le boutton et que ce soit responsive, après, je saurais l'adapter pour toute les lettres et finir mon projet. Des idées pour faire déplacer la goute ?

Le truc le plus chiant, c'est de récupérer la position des lettres. Chaque lettre auras une position en fonction de la taille de l'écran (comme tu l'as dit, A se situe à (X% ; Y%) de la taille de la fenêtre). A partir de ça, tu peux calculer la position de chaque lettre au chargement de ton component / resize de la fenêtre (tu as accès à l'élément window dans Angular, et du coup à la taille de l'écran).

Pour changer la position de la goute, tu change tout simplement les params de ta méthode gets() : au lieu d'utiliser la position de la souris, tu utilise la position de la lettre choisie.

Oui, mais comment déplacer la goutte ? Même avec des coordonées ?

Tu modifie les paramètres de ta méthode gets() (quelque part, tu dois lui fournir la position de la souris quand tu drag, et bah tu lui fille la position d'une lettre), ce qui vas modifier la propriété css transform de ta goutte

C'est à dire ???

JérémyChamboultou a écrit:

Voici ma page html (app.component.ts) :

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

Es-ce que tu comprends ce que tu as fait avec ces 4 lignes ?

Oui, le cdkDrop c'est comme un id pour qu'un scripte le trouve et s'occupe qu'on puisse le drag. Pourquoi? Peux-tu m'expliquer plus en détails ta méthode ?

Alors déjà je vais t'expliquer ce que tu as fait. On a donc une div qui contient une image. Tu affecte un style à cette image avec la méthode gets(). Donc si tu veux modifier le style de cette image (par exemple sa position), il faut que tu modifie le retour de cette méthode gets().

Passons à cette méthode gets(). Quelque part, tu lui fournit les coordonnées du pointeur de la souris (enfin j'imagine ?). Donc si tu veux arriver à une lettre, tu n'as qu'à utiliser la position d'une lettre au lieu d'utiliser la position de la souris.

Et si tu n'as pas le moyen de changer le retour de la méthode gets(), et bah il faut l'enrober avec une autre méthode qui te permet d'avoir les valeurs souhaitées.

Ok.Merci, mais comment changer le retour de la méthode gets() ?

Alors, j'ai regardé vite fait angular material. Il me semble que tu ne peux pas faire ce que tu souhaite : tu peux juste déclarer des items draggable, des endroits pour drop, récupérer des données, mais tu ne peux pas insérer un event pour débuter un drag.

Par contre, je n'ai vu aucun exemple utiliser [ngStyle]="{transform: gets()}", et c'est cette méthode gets() qui vas placer ta goutte en retournant une string comme ça : translate3d(578px, 213px, 0px) tu n'as qu'à changer cette string, soit tu met un if pour choisir le retour de gets() ou une valeur dans un tableau, soit tu change le retour de gets() (tu fais tout simplement un return avec la valeur que tu souhaite), soit tu change de librairie, soit tu fais tout à la main (à voir si le drag de base du html5 ne te suffit pas)

En fait, le [ngStyle]="{transform: gets()}", c'est moi qui l'ai rajouter pour essayer de modiffier avec le ts le translate 3d, j'avais fait ce code : 

import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ouija';
  x = 20;
  y = 20;

  gets(){
    return 'translate3d(' + this.x + ', ' + this.y + ', 0px)';
  }
  move() {
    this.x = this.x + 20;
    this.y = this.y + 20;
    console.log('translate3d(' + this.x + 'px, ' + this.y + 'px, 0px)');
  }
}

Mais il ne marche pas, des idées de pourquoi ?

Alors, ton move ne marche pas parce qu'il ne fais qu'affecter des valeurs à des variables, Angular ne comprends pas qu'il faut update ton component.

import {Component} from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ouija';
  x = 20;
  y = 20;
  style = {
   transform: 'translate3d(' + this.x + 'px,' + this.y + 'px, 0)'
  }
  move() {
    this.x = this.x + 20;
    this.y = this.y + 20;
    console.log('translate3d(' + this.x + 'px, ' + this.y + 'px, 0px)');
  }
}

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

ça fais un petit moment que je n'ai pas fait d'angular, mais il me semble qu'il faut faire un truc comme ça.

Merci, mais ça ne marche toujours pas, êtes-vous sure d'avoir correctement appliquer le style ? Merci beaucoup et merci d'avance. Jérémy

et sans la directive, ça donne quoi ?

La goutte ne bouge plus du tout, même avec la souris (c'est normal), mais le boutton n'a toujours auccune acction, je me demande si le ngStyle est correctement fait .

D'autres idées ?

Merci beaucoup.

Jérémy.

mmm ... il ne doit toujours pas capter que ça change.

<div class="ouija" cdkDrop>
  <img src="./assets/goute.png" width="7%" [ngStyle]="{transform: 'translate3d('+x+'px,'+y'+px,0)'}"/>
  </div>
<button class="move" (click)="move()">Move</button>

plus d'idées après =/

Hiiiiii !

Uncaught Error: Template parse errors:
Parser Error: Missing expected } at column 37 in [{transform: 'translate3d('+x+'px,'+y'+px,0)'}] in ng:///AppModule/AppComponent.html@1:43 ("<div class="ouija" cdkDrop>
  <img src="./assets/goute.png" width="7%" [ERROR ->][ngStyle]="{transform: 'translate3d('+x+'px,'+y'+px,0)'}"/>
</div>
<button class="move" (click)="move"): ng:///AppModule/AppComponent.html@1:43
Parser Error: Missing expected } at column 37 in [{transform: 'translate3d('+x+'px,'+y'+px,0)'}] in ng:///AppModule/AppComponent.html@1:43 (" width="7%" [ngStyle]="{transform: 'translate3d('+x+'px,'+y'+px,0)'}"/>
</div>
<button class="move" [ERROR ->](click)="move()">Move</button>
"): ng:///AppModule/AppComponent.html@3:21
    at syntaxError (compiler.js:2547)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:19495)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25041)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25028)
    at compiler.js:24971
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24971)
    at compiler.js:24881
    at Object.then (compiler.js:2538)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24880)

 En plus de l'erreur, l'écrant est tout noir.

ah, my bad, j'ai mis un ' avant le + ^^"

<div class="ouija">
  <img src="./assets/goute.png" width="7%" [ngStyle]="{transform: 'translate3d('+x+'px,'+y+'px,0)'}"/>
  </div>
<button class="move" (click)="move()">Move</button>

Yes! Merci. Ca marche (un peu ...) : http://gnhome.freeboxos.fr/ouija/

Ca marche, mais quand on bouge la goutte, puis qu'on appuie sur le boutton, puis qu'on rebouge la goutte, il y a un gros bug, en fait hammerjs qui est inclu dans angular material a aussi une variable x et y et il faudrai que ce soit la même variable entre les deux scripts pour ou qu'a chaque vois ils récuppèrent la position de la goutte. Des idées ?

Merci beaucoup et merci d'avance.

Jérémy

changer de librairie pour gérer le drag (malheureusement je n'ai rien vu pour injecter une position =/). Il y a gsap qui est sympa  https://greensock.com/gsap sinon tu peux le faire toi même, au mousedown sur la goute tu démare le drag, au mouse move (sur la page) tu récupère la position de la souris e tu peux update la position de ta goute (avec un translate 3d ou une position absolute) et au mouseup tu arrête le drag (et tu enlève le mousemove sur la page)

Merci, mais mon but est que ça marche aussi sur mobile, le mousedown ne marche donc pas. D'autres idées ?

Il n'y a pas de mouseevents sur du tactile, mais il y a les touchevents : https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Touch_events

Merxi, j'ai éssayé, mais evt est inconnu, avez-vous un exemple ?

Avec angular, on utilise souvent hammer.js pour la gestion des touch events https://hammerjs.github.io/getting-started/

Ok, mais vous avez-des exemples ?

https://hammerjs.github.io/examples/ Si tu veux un exemple précis de ta situation, non, je n'en ai pas. En créer un signifie refaire toute ton appli, j'ai un peu la flemme. Dans la doc tu as de multiples exemples, il suffit de choisir ceux qui correspondent à tes besoins et les adapter.

Y a-t-il juste une démo d'un drag and drop avec dans le js une variable x et y ?

https://codepen.io/bladnman/pen/LEWYYN