sur quel élément agir pour différencier mes divs à resizer

Version imprimable

Bonjour

je vous sollicite car je n'arrive pas a trouver sur quel élément agir pour différencier mes divs a resizé

voila j'ai fait un petit script de travail avec 3 div que je voudrais resizée vers la droite mais quand je sélectionne la deuxième ou troisième div, c’a me resize la première

je pense a un problème de css et de position absolu/relative...

Merci de votre aide

le lien pour test : https://jsfiddle.net/arawn45/5y9uo08a/2/

voici mon script

Code:

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<div class='resizable'>
  <div class='resizers'>
 
    <div class='resizer top-right'></div>
 
  </div>
</div>
<br>
<div class='resizable'>
  <div class='resizers'>
 
    <div class='resizer top-right'></div>
 
  </div>
</div>
<br>
<div class='resizable'>
  <div class='resizers'>
 
    <div class='resizer top-right'></div>
 
  </div>
</div>
 
 
<style type="text/css">
 
body,
html {
  background: black;
}
.resizable {
  background: white;
  width: 100px;
  height: 100px;
  position: relative;
  top: 100px;
  left: 100px;
}
 
.resizable .resizers{
  width: 100%;
  height: 100%;
  border: 3px solid #4286f4;
  box-sizing: border-box;
}
 
.resizable .resizers .resizer{
  width: 5px;
  height: 100%;
 
  position: absolute;
}
 
 
.resizable .resizers .resizer.top-right {
  right: -1px;
  top: -1px;
  cursor: ew-resize;
}
 
 
 
 </style>
 
<script >
/*Make resizable div by Hung Nguyen*/
function makeResizableDiv(div) {
  const element = document.querySelector(div);
  const resizers = document.querySelectorAll(div + ' .resizer')
  const minimum_size = 20;
  let original_width = 0;
  let original_height = 0;
  let original_x = 0;
  let original_y = 0;
  let original_mouse_x = 0;
  let original_mouse_y = 0;
  for (let i = 0;i < resizers.length; i++) {
    const currentResizer = resizers[i];
    currentResizer.addEventListener('mousedown', function(e) {
      e.preventDefault()
      original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));
      //original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));
      original_x = element.getBoundingClientRect().left;
      original_y = element.getBoundingClientRect().top;
      original_mouse_x = e.pageX;
      original_mouse_y = e.pageY;
      window.addEventListener('mousemove', resize)
      window.addEventListener('mouseup', stopResize)
    })
 
    function resize(e) {
      if (currentResizer.classList.contains('bottom-right')) {
        const width = original_width + (e.pageX - original_mouse_x);
        const height = original_height + Math.round((e.pageY - original_mouse_y)/20)*20
        if (width > minimum_size) {
          element.style.width = width + 'px'
        }
        if (height > minimum_size) {
          //element.style.height = height + 'px'
        }
      }
      else if (currentResizer.classList.contains('bottom-left')) {
        const height = original_height + (e.pageY - original_mouse_y)
        const width = original_width - (e.pageX - original_mouse_x)
        if (height > minimum_size) {
          //element.style.height = height + 'px'
        }
        if (width > minimum_size) {
          element.style.width = width + 'px'
          element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
        }
      }
      else if (currentResizer.classList.contains('top-right')) {
        const width = original_width + Math.round((e.pageX - original_mouse_x)/100)*100
        const height = original_height - (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
        }
        if (height > minimum_size) {
          //element.style.height = height + 'px'
          //element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
        }
      }
      else {
        const width = original_width - (e.pageX - original_mouse_x)
        const height = original_height - (e.pageY - original_mouse_y)
        if (width > minimum_size) {
          element.style.width = width + 'px'
          //element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'
        }
        if (height > minimum_size) {
          //element.style.height = height + 'px'
          //element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'
        }
      }
    }
 
    function stopResize() {
      window.removeEventListener('mousemove', resize)
    }
  }
}
 
makeResizableDiv('.resizable')
 
</script>

13/04/2024, 09h53
mathieu

regardez dans les écouteurs d'évènement si les variables contiennent bien les balises prévues.
si ce n'est pas le cas, essayez d'utiliser les informations de l'évènement pour trouver les bonnes balises.

Salut chris45,

Code:

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
        const divResizer = document.querySelectorAll('.resizer')
 
        for (const divSelect of divResizer) {
            divSelect.addEventListener('mousedown', () => {
                let offset = { x: 0, y: 0 },
                    rezisecontent = divSelect.closest('.resizable')
 
                rezisecontent.addEventListener('mousedown', resizeMouseDown, false)
                rezisecontent.addEventListener('mouseup', resizeMouseUp, false)
 
                function resizeMouseUp() {
                    window.removeEventListener('mousemove', divResize, true)
                }
 
                function resizeMouseDown(e) {
                    offset.x = e.clientX - rezisecontent.offsetWidth
                    window.addEventListener('mousemove', divResize, true)
                }
 
                function divResize(e) {
                    let left = e.clientX - offset.x
                    let maxLeft = (window.clientWidth)
                    left = left > maxLeft ? maxLeft - 1 : left
                    rezisecontent.style.width = `${left}px`
                }
            })
        }

13/04/2024, 21h27
chris45
merci pour vos reponse,

donc mon css serait bien, il faut que je regarde les ecouteurs d'evenement.

je je comprend mon script au demarrage j'ai ca : makeResizableDiv('.resizable') qui lance la fonction

dans la fonction, une boucle qui regarde les differente div du document

dans la boucle l'écouteur de currentdiv : currentResizer.addEventListener('mousedown', function(e) {recupere les position de depart
ensuite execute resize avec la fonction : window.addEventListener('mousemove', resize)et je pense c'est la que je perds la div concerné :
Code:

1 2 3 function resize(e) { …
je vais tester le code ASCIIDEFOND, ( merci pour ta suggestion ), ca fonction tres bien et code plus simple que le mien MERCI, bonne soirée

Christophe
16/04/2024, 16h50
NoSmoking
Bonjour,
attention, définir des fonctions à l'intérieur d'une boucle n'a jamais été une bonne idée !

Autre grosse inquiétude dans la gestion des addEventListener, on en ajoute à chaque fois que l'on fait un mousedown sans jamais en enlever, ils se cumulent.

Juste ajouter pout test un console.log(e.type) :
Code:

1 2 3 4 5 function resizeMouseDown(e) { console.log(e.type); // Juste pour voir offset.x = e.clientX - rezisecontent.offsetWidth window.addEventListener('mousemove', divResize, true) }
16/04/2024, 18h18
chris45

bonjour,
j'ai parlé trop vite, le script fonctionne bien , prends en charge distinctement les div.

mais le probleme est que lorsque je glisse la div vers la droite et sort en glissant par le dessus ou le dessous il continu de glisser la div sans maintenir le clic, et en plus si je glisse une autre div, il glisse les deux.

sur le log on voit bien que le mouseup n'est pas pris en compte si on lache la sourie en dehors de la div...

je prends note pour les 'addeventlistener' dans une boucle non conseillé ( dans mon projet les div ne sont pas defini au depart et créé dynamiquement )

j'ai constaté en effet qu'il faut faire un remove dans la l'ecouteur.de la div

sinon merci pour vos echanges

https://jsfiddle.net/arawn45/u7rt14as/7/

Christophe

Citation:

Envoyé par chris45

...mais le probleme est que lorsque je glisse la div vers la droite et sort en glissant par le dessus ou le dessous il continu de glisser la div sans maintenir le clic, et en plus si je glisse une autre div, il glisse les deux...

Code:

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
        const divResizer = document.querySelectorAll('.resizer')
        let rezisecontent = null, offset = { x: 0 }
 
        for (const divSelect of divResizer) {
            divSelect.addEventListener('mousedown', () => {
                rezisecontent = divSelect.closest('.resizable')
 
                rezisecontent.addEventListener('mousedown', resizeMouseDown, false)
                window.addEventListener('mouseup', resizeMouseUp, false)
 
                function resizeMouseUp() {
                    window.removeEventListener('mousemove', divResize, true)
                    rezisecontent = null
                }
 
                function resizeMouseDown(e) {
                    if (rezisecontent) {
                        offset.x = e.clientX - rezisecontent.offsetWidth
                        window.addEventListener('mousemove', divResize, true)
                    }
                }
 
                function divResize(e) {
                    let left = e.clientX - offset.x
                    let maxLeft = (window.clientWidth)
                    left = left > maxLeft ? maxLeft - 1 : left
                    rezisecontent.style.width = `${left}px`
                }
            })
        }

17/04/2024, 18h29
chris45

merci, j'ai testé ca fonctionne .

je vais essayer de comprendre le principe de fonctionnement et la modification apportée.

car pour moi c'est aussi de comprendre la logique du script pout transposer.

merci encore de votre aide.

bonne journée

Christophe
17/04/2024, 19h05
NoSmoking

Citation:

merci, j'ai testé ca fonctionne .

Oui mais toujours le même problème de :

Citation:

Envoyé par NoSmoking

Autre grosse inquiétude dans la gestion des addEventListener, on en ajoute à chaque fois que l'on fait un mousedown sans jamais en enlever, ils se cumulent.