Discussion :

[Gluups]

Bonjour tout le monde,

Quelqu'un aurait-il un conseil quant à une documentation sur les événements avec leurs propriétés, à utiliser sous Angular JS ?

Par exemple sur un glissé de souris je n'ai pas trouvé les coordonnées de la souris au départ et à l'arrivée, et je soupçonne que je n'ai pas utilisé le bon type d'événement.

On trouve des choses intéressantes chez Mozilla, mais pas avec ce niveau de détail :
https://developer.mozilla.org/en-US/.../API/DragEvent

[NoSmoking]

Bonjour,
pour tout savoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
oElem.addEventListener("dragstart", function(ev) {
    console.log("DragStart-Event :", ev);
});

Pour info :
Regarde cette discussion : Drag and drop méthode setData pour dataTransfert et l'exemple en ligne que j'ai mis : Drag and drop.

[Gluups]

Merci.

Oui le datatransfer c'est la base du glissé de souris, et avec ça on ne s'embête pas trop avec la position du curseur, c'est le système qui gère la position des objets.

Mais je voudrais définir une zone rectangulaire, dans laquelle les objets présents seront sélectionnés. Ensuite, je fais un glissé de souris sur la zone obtenue, pour déplacer les objets qui se trouvent dessus.

Pour la première phase (sélectionner la zone), je m'en suis sorti avec deux doubles clics, mais c'est un pis aller.

Est-ce qu'on est capable de dire la position du curseur au début du glissé, et la position à la fin ?
Au début, facile, mais à la fin c'est une autre paire de manches.

Pourtant, en Javascript, dans le mousedrag (début du drag and drop) je mets X1 = event.pageX, Y1 = event.pageY, et dans le allowdrop (à chaque mouvement) je mets X2 = event.pageX, Y2 = event.pageY. Ça donne des coordonnées relatives à la page, pour en avoir relatives au contrôle contenant il y a d'autres propriétés.

Et ça ça marche, mais j'ai été incapable de le refaire sous Angular JS, ce qui est quand même un comble. Si mes souvenirs sont exacts j'obtiens X2=X1, Y2=Y1. Et ça, ça fait un point, pas un rectangle.

[NoSmoking]

Est-ce qu'on est capable de dire la position du curseur au début du glissé, et la position à la fin ?

Sur les éléments acceptant le « drop » tu places une classe, par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="drop-zone"></div>

et sur tous les éléments possédant cette classe tu mets un écouteurs drop.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
oElem.addEventListener("drop", function(ev) {
    console.log("Drop-Event :", e)
})

tu auras toutes les informations nécessaires à ta gestion dans la console (F12).

[Gluups]

Voui, partir à la découverte en me basant juste sur les noms des propriétés, j'ai déjà pratiqué, au bout de quelques demi-journées je n'avais toujours pas ce fichu rectangle.

J'avais les coordonnées de départ sous je ne sais plus combien de formes, au moins une demi-douzaine, par rapport à la page, par rapport au contrôle parent, et ainsi de suite.
Mais pour les coordonnées d'arrivée, que dalle.

[NoSmoking]

Voui, partir à la découverte en me basant juste sur les noms des propriétés, j'ai déjà pratiqué, au bout de quelques demi-journées je n'avais toujours pas ce fichu rectangle.

Et comment crois tu que l'on ait fait pour apprendre ?????

De plus actuellement ce n'est quand même pas la documentation de qualité qui manque, et en plus la plupart du temps traduite : Interface MouseEvent.

Quel est le but recherché, sélection à l'écran puis transfert des éléments contenus dans la sélection ?
Si c'est cela autant passer par les événements mousedown, move et up, les paramètres de l'EventMouse seront les mêmes.

Un dernière question, pourquoi AngularJS, je n'avais pas percuté !?!

[Gluups]

Et comment crois tu que l'on ait fait pour apprendre ?????

De plus actuellement ce n'est quand même pas la documentation de qualité qui manque, et en plus la plupart du temps traduite : Interface MouseEvent.

Oui c'était bien l'objet de la question, merci. Bon mais apparemment c'est bien avec les mêmes propriétés que j'ai travaillé. En fait sous Angular, par défaut on tape juste event, si on veut un événement donné pour y trouver une propriété donnée il faut le préciser. C'est pour ça que savoir où ça se tient ça aiderait. Parce que dans dragstart et dragmove il y a bien des coordonnées, sans préciser de type d'événement, mais les mêmes au début et à la fin, donc pour tracer un rectangle, ça fait un peu juste.

Quel est le but recherché, sélection à l'écran puis transfert des éléments contenus dans la sélection ?

Tout-à-fait.

Si c'est cela autant passer par les événements mousedown, move et up, les paramètres de l'EventMouse seront les mêmes.

Ça semble en effet être une voie à explorer.

Un dernière question, pourquoi AngularJS, je n'avais pas percuté !?!

C'est avec ça qu'on affiche les données de WebAPI, à ce stade je ne vais pas remettre en cause l'architecture du projet. Y a-t-il un forum plus adapté ?

[NoSmoking]

As tu essayé un truc du style, 1000 excuses pour les erreurs éventuelles

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
<body
  ng-app="myApp"
  ng-controller="myDrag"
  ng-mouseup="handlerMouseUp($event)"
  ng-mousemove="handlerMouseMove($event)"
  ng-mousedown="handlerMouseDown($event)"
>
<p>Down : {{infoDown}}</p>
<p>Move : {{infoMove}}</p>
<p>Up   : {{infoUp}}</p>
</body>

avec :

Code :

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
var app = angular.module('myApp', []);
app.controller('myDrag', function($scope) {
  $scope.drag = {
    start: [],
    end: []
  };
  $scope.handlerMouseDown = function(ev) {
    $scope.drag.start = [ev.pageX, ev.pageY];
    $scope.infoDown = `x :${ev.pageX}, y :${ev.pageY}`;
  };
  $scope.handlerMouseMove = function(ev) {
    $scope.infoMove = `x :${ev.pageX}, y :${ev.pageY}`;
  };
  $scope.handlerMouseUp = function(ev) {
    $scope.drag.end = [ev.pageX, ev.pageY];
    $scope.infoUp = `x :${ev.pageX}, y :${ev.pageY}`;
    console.log(JSON.stringify($scope.drag, null, 2))
  };
});

[Gluups]

Je ne suis pas sûr, je vais tâcher de trouver un moment, merci.