Discussion :

[Gluups]

Bonjour tout le monde,

J'ai une structure dans ce style :

Code HTML :

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

1
2
3
4
<div id="dragging-container">
    <div id="selectframe"></div>
    <div list></div>
</div>

Au départ selectframe n'est pas visible, puis des scripts lors des doubles clics agissent sur ses propriétés, pour dessiner un rectangle de sélection sur la page, à l'intérieur du dragging-container.
div list est un ensemble d'éléments générés par Angular JS.
Les éléments dont les coordonnées sont à l'intérieur du rectangle matérialisé par selectframe sont bougés à mesure que selectframe subit un glissé de souris.

J'espère que jusque là c'est clair, car j'arrive à ma question.

Après chargement de la page, cette affaire-là fonctionne très bien, mais une fois que les propriétés de style de selectframe ont été modifiées par les scripts, son positionnement "absolute" ne se fait plus par rapport au dragging-container comme il devrait, mais, selon les positions des éléments à l'intérieur, souvent l'abscisse est correcte mais l'ordonnée est positionnée par rapport au premier élément de div list. Et il se trouve que document.getElementById("selectframe").offsetParent est nul à ce moment, ce qui explique que position=absolute ne fonctionne pas correctement, puisque je devrais avoir offsetParent = dragging-container (syntaxe simplifiée).

Ma première idée avait été position="fixed", ce qui fonctionne tant que le haut de la page est affiché, mais une fois qu'on défile, bien entendu, tout faux.

Quelqu'un aurait-il une idée de comment m'y prendre pour que mon positionnement reste référé non au premier élément à l'intérieur, mais bien toujours référé au dragging-container ?

[Invité]

Bonjour,

il faut que le parent soit aussi "positionné".

Pour le reste, difficile à dire sans une page en ligne à TESTER.

[Gluups]

Merci de la réponse.
Le parent est en position:relative, display:flex, il y a une height, pas de top ni left.

Je crois que je vais être bon pour faire quelques tests avec des pages statiques.
Ah oui et puis pour le selectframe, à un moment je réinitialise border, zIndex, top, left, width, height. Peut-être devrais-je avoir la main plus légère de ce côté.

[Gluups]

Peut-être que ça aide si je donne le script qui modifie selectframe ?

ça se déroule en trois phases, marquées par trois doubles clics sur le dragging-container :
- définition du coin supérieur gauche
- définition du coin inférieur droit et définition d'une zone de sélection
- fin de l'opération de drag-and-drop

C'est quand je fais un deuxième cycle que selectframe ne se positionne pas par rapport au bon repère.

Code javascript :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
  container_dblclick($event) {
    var d = document.getElementById("dragging-container");
    if (this.tmpSelDblClick == 0) {
      this.X1 = $event.layerX;// - d.offsetLeft;
      this.Y1 = $event.layerY;// - d.offsetTop;
      var c = document.getElementById("dragging-container");
      console.log("X1 : " + this.X1.toString() + " - Y1 : " + this.Y1.toString());
      document.getElementById("selectmsg").innerHTML =
        "Please double click on the opposite corner of the area to select";
        //this.X1 + " " + this.Y1;
      this.tmpSelDblClick = 1;
    } else if (this.tmpSelDblClick == 1) {
      this.tmpSelDblClick = 2;
      this.X2 = $event.layerX;// - d.offsetLeft;
      this.Y2 = $event.layerY;// - d.offsetTop;
      console.log("X2 : " + this.X2.toString() + " - Y2 : " + this.Y2.toString());
      document.getElementById("selectmsg").innerHTML =
        "Please move the area to move the elements under it. Double click outside to end."
        //this.X1 + " " + this.Y1 + " / " + this.X2 + " " + this.Y2;
      var s = document.getElementById("selectframe");
      var dc = document.getElementById("page-bg-image"); 
      //this.X1 = (this.X1 * 1) - (dc.offsetParent.offsetLeft);
      //this.X2 = (this.X2 * 1) - (dc.offsetParent.offsetLeft);
      //this.Y1 = (this.Y1 * 1) - (dc.offsetParent.offsetTop * 1);
      //this.Y2 = (this.Y2 * 1) - (dc.offsetParent.offsetTop * 1);
      s.style.zIndex = "4";
      s.style.position = "absolute";
      s.style.top = this.Y1 + "px";
      s.style.left = this.X1 + "px";
      s.style.width = (this.X2 - this.X1) + "px";
      s.style.height = (this.Y2 - this.Y1) + "px";
      s.style.border = "solid";
      this.SelectElementsFromCoord();
    } else if (this.tmpSelDblClick == 2) {
      this.lstElements = [];
      var s = document.getElementById("selectframe");
      s.style.top = "0";
      s.style.left = "0";
      s.style.width = "1px";
      s.style.height = "1px";
      this.X1 = 0;
      this.Y1 = 0;
      this.X2 = 0;
      this.Y2 = 0; 
      document.getElementById("selectmsg").innerHTML = "<BR />";
      this.tmpSelDblClick = 0;
    }
  }
 
  SelectElementsFromCoord(this) {
    var _this = this;
    var c = document.getElementById("dragging-container");
    this.el.ycod = 0 ;
    var i = 0;
    this.configICList[0].icList.forEach(function (elem) {
      var h = document.getElementById(elem.icid);
      var x = h.offsetLeft;
      var y = h.offsetTop;
 
      //x = (x * 1) + (dc.offsetLeft * 1);
      console.log("i : " + i + " - x : " + x + " ; y : " + y);
      console.log("relative to the dragging container :");
      console.log("X1 : " + _this.X1 + " ; Y1 : " + _this.Y1);
      console.log("X2 : " + _this.X2 + " ; Y2 : " + _this.Y2);
      console.log("relative to the page :");
      console.log("X1 : " + ((_this.X1 * 1) + (c.offsetLeft * 1)) + " ; Y1 : " + ((_this.Y1 * 1) + (c.offsetTop * 1)));
      console.log("X2 : " + ((_this.X2 * 1) + (c.offsetLeft * 1)) + " ; Y2 : " + ((_this.Y2 * 1) + (c.offsetTop * 1)));
 
      _this.el.id = elem.icid;
      _this.el.xcod = document.getElementById(elem.icid).style.left;
      _this.el.ycod = document.getElementById(elem.icid).style.top;
      if ((_this.X1 < x) && (x < _this.X2) && (_this.Y1 < y) && (y < _this.Y2)) {
        console.log(elem.icid + " : " + elem.shortText);
        console.log("++++++++++++++++++++++++++++++++++++++++++");
        var el = { id: _this.el.id, xcod: _this.el.xcod + "", ycod: _this.el.ycod + "" };
        _this.lstElements.push(el);
      }
      else {
        console.log("-----------------------------------------");
      }
      i++;
    });
    console.log(this.lstElements.length + " elements selected : ");
    this.lstElements.forEach(function (element) {
      console.log(element.id + " ; " + element.xcod + ", " + element.ycod)
    });
  }

[Gluups]

Je commence à explorer une autre voie : à la fin au lieu de masquer la zone de sélection en changeant les coordonnées et la bordure, je la supprime après l'avoir clonée, après quoi je réinsère le clone par insertAdjacentElement("afterbegin", cln).
ça permet de bien positionner la zone par les double-clics, ce qui était le but.
En revanche le clone s'avère non draggable, donc il faut que je remette les attributs correspondants alors qu'AngularJS me les avait mis sans que j'aie trop à y penser.
J'ai mis draggable = true, addEventListener("dragstart", ), addEventListener("dragover", ), addEventListener("dragend", ).
J'ai dû en oublier un, car ça ne bouge pas.

Mais du coup on change de forum ...

[abdennour bouaicha]

ajoute l'instruction !important dans ton code , peut être le script change le type de positionnement pour le child ou pour le parent

Code :

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

1
2
3
4
5
6
7
 
.parent{
position:relative !important; 
}
.child{
position:absolute !important; 
}