Enclenchement des boutons dans une zone précise

**JT68.** · 29/08/2023, 11h16

Quand j’exécute mon code, je n’arrive pas à faire en sorte que les boutons s’enclenche automatiquement au centre de la zone crée ( délimitée par des pointillés ), quand je mets le coin d’un bouton dans la zone.
( j’exécute le code sur mobile avec l’application Koder donc je ne connais pas le résultat sur un ordinateur )

Voici le code :

Code html :

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
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html>
<head>
  <title>Alphabet Buttons</title>
  <meta charset="UTF-8">
  <style>
    body {
      font-family: Arial, sans-serif;
      overflow: hidden;
      margin: 0;
    }
    #buttons-container {
      width: 100vw;
      height: 100vh;
      position: relative;
      overflow: hidden;
    }
    .draggable {
      position: absolute;
      width: 150px;
      height: 150px;
      font-size: 50px;
      touch-action: none;
    }
    .target-zone {
      position: absolute;
      border: 2px dashed black;
      background-color: white; /* Fond blanc de la zone */
      pointer-events: none;
      border-radius: 15px; /* Rayon de bordure pour les coins arrondis */
    }
  </style>
</head>
<body>
  <div id="buttons-container"></div>
 
  <script>
    const alphabet = "abcdefghijklmnopqrstuvwxyz";
    const buttonsContainer = document.getElementById("buttons-container");
    const buttonSize = 150;
    const containerWidth = window.innerWidth;
    const containerHeight = window.innerHeight;
    let activeButton = null;
    let targetZone = null;
 
    createTargetZone(50, 50); // Create the target zone
 
    for (let i = 0; i < alphabet.length; i++) {
      const button = document.createElement("button");
      button.innerHTML = alphabet[i].toUpperCase();
      button.classList.add("draggable");
      placeButtonRandomly(button);
      button.addEventListener("touchstart", (e) => {
        activeButton = button;
      });
      button.addEventListener("touchmove", (e) => {
        if (activeButton === button) {
          const maxX = containerWidth - buttonSize;
          const maxY = containerHeight - buttonSize;
          const targetX = clamp(e.touches[0].clientX - buttonSize / 2, 0, maxX);
          const targetY = clamp(e.touches[0].clientY - buttonSize / 2, 0, maxY);
          moveButton(button, targetX, targetY);
          checkTargetZone(button);
          preventButtonOverlap(button);
        }
      });
      button.addEventListener("touchend", (e) => {
        activeButton = null;
        checkTargetZone(button);
        preventButtonOverlap(button);
      });
      buttonsContainer.appendChild(button);
    }
 
    function placeButtonRandomly(button) {
      let attempts = 0;
      const maxAttempts = 100;
      while (attempts < maxAttempts) {
        const minX = 0;
        const maxX = containerWidth - buttonSize;
        const minY = 0;
        const maxY = containerHeight - buttonSize;
        const randomX = Math.random() * (maxX - minX) + minX;
        const randomY = Math.random() * (maxY - minY) + minY;
 
        const overlappingButton = Array.from(buttonsContainer.getElementsByClassName("draggable"))
          .find(otherButton => isOverlappingButton(randomX, randomY, otherButton));
 
        if (!overlappingButton) {
          moveButton(button, randomX, randomY);
          break;
        }
        attempts++;
      }
    }
 
    function moveButton(button, x, y) {
      button.style.left = x + "px";
      button.style.top = y + "px";
    }
 
    function checkTargetZone(button) {
      if (!targetZone) {
        return;
      }
      
      const buttonRect = button.getBoundingClientRect();
      const targetRect = targetZone.getBoundingClientRect();
 
      if (
        buttonRect.left >= targetRect.left &&
        buttonRect.top >= targetRect.top &&
        buttonRect.right <= targetRect.right &&
        buttonRect.bottom <= targetRect.bottom
      ) {
        const targetX = targetRect.left + targetRect.width / 2 - buttonSize / 2;
        const targetY = targetRect.top + targetRect.height / 2 - buttonSize / 2;
        moveButton(button, targetX, targetY);
      }
    }
 
    function preventButtonOverlap(movingButton) {
      if (!activeButton) {
        const buttons = Array.from(buttonsContainer.getElementsByClassName("draggable"));
        buttons.forEach(otherButton => {
          if (otherButton !== movingButton && isOverlapping(movingButton, otherButton)) {
            const rect = otherButton.getBoundingClientRect();
            const newLeft = rect.right + 5; // Move
            const newTop = rect.bottom + 5; // Move to the bottom
 
            if (newLeft + buttonSize <= containerWidth) {
              moveButton(movingButton, newLeft, parseFloat(movingButton.style.top));
              preventButtonOverlap(movingButton); // Check for overlap again
            } else if (newTop + buttonSize <= containerHeight) {
              moveButton(movingButton, parseFloat(movingButton.style.left), newTop);
              preventButtonOverlap(movingButton); // Check for overlap again
            } else if (parseFloat(movingButton.style.left) - buttonSize >= 0) {
              moveButton(movingButton, parseFloat(movingButton.style.left) - buttonSize, parseFloat(movingButton.style.top));
              preventButtonOverlap(movingButton); // Check for overlap again
            }
          }
        });
      }
    }
 
    function isOverlapping(elem1, elem2) {
      const rect1 = elem1.getBoundingClientRect();
      const rect2 = elem2.getBoundingClientRect();
      return !(rect1.right < rect2.left || 
               rect1.left > rect2.right || 
               rect1.bottom < rect2.top || 
               rect1.top > rect2.bottom);
    }
 
    function isOverlappingButton(x, y, elem) {
      const rect = elem.getBoundingClientRect();
      return (x < rect.right && x + buttonSize > rect.left &&
              y < rect.bottom && y + buttonSize > rect.top);
    }
 
    function createTargetZone(x, y) {
      targetZone = document.createElement("div");
      targetZone.classList.add("target-zone");
      targetZone.style.width = buttonSize + "px";
      targetZone.style.height = buttonSize + "px";
      targetZone.style.left = x + "px";
      targetZone.style.top = y + "px";
      buttonsContainer.appendChild(targetZone);
    }
 
    function clamp(value, min, max) {
      return Math.min(Math.max(value, min), max);
    }
  </script>
</body>
</html>

**NoSmoking** · 29/08/2023, 18h52

Bonjour et bienvenue sur DVP.

( j’exécute le code sur mobile avec l’application Koder donc je ne connais pas le résultat sur un ordinateur )

Dans ce cas il est préférable d'utiliser les événements de pointeur, pointerdown/move/up ..., pas grand chose à changer dans ton code.

↪ Les événements de pointeur

je n’arrive pas à faire en sorte que les boutons s’enclenche automatiquement au centre de la zone crée

J’espère avoir compris mais pas sûr.

Dans ta fonction checkTargetZone, il me semble préférable de faire le test avec les valeurs de rectangle et de ne pas utiliser buttonSize.

Code :

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

1
2
3
// Ne pas utiliser buttonSize qui est la dimension de la zone de reception du drag
const targetX = targetRect.left + (targetRect.width - buttonRect.width) / 2;
const targetY = targetRect.top + (targetRect.height - buttonRect.height) / 2;

... pas tout regardé en détail ...

**JT68.** · 30/08/2023, 14h59

Merci d’avoir répondu à ma question et regardé mon problème, j’ai modifié mon code comme vous me l’avez conseillé mais rien n’a été modifié dans le résultat, j’ai posé la question à chat GPT et il n’a pas trouvé de réponse fonctionnelle.

**SpaceFrog** · 30/08/2023, 15h29

LOL j'ai demandé de nombreux scripts JS à chat GPT ... Pas un seul ne s'est avéré fonctionnel

**NoSmoking** · 31/08/2023, 18h27

Pour ma part je n'ai toujours pas bien saisi « les boutons s’enclenche automatiquement au centre de la zone crée ».

En relisant ta demande il semblerait que pour obtenir ton « quand je mets le coin d’un bouton dans la zone » il te faille utiliser une fonction d'intersection de deux rectangles plutôt que ta checkTargetZone.
C'est ce que fait ta fonction isOverlapping.

PS: Attention toutefois à ne le faire que sur le relâchement du pointer sinon gare aux effets de bords, tu ne pourras plus le ressortir !

Enclenchement des boutons dans une zone précise

JavaScript

Vue hybride

Discussions similaires

Partager

Partager