Synthese des couleur

Martyr
Les bases HTML/CSS

Décrivez ici votre problème ou ce que vous cherchez à faire.

"<div class="container" style="top: 100px; left: 100px;">
<div class="square"></div>
<div class="circle"></div>
</div>

<div class="container" style="top: 200px; left: 200px;">
<div class="square"></div>
<div class="circle" style="background-color: red;"></div>
</div>

<script>
let isResizing = false;
let isDragging = false;
let initialX, initialY, offsetX, offsetY, initialWidth, circle, square;

function startResize(evt) {
  isResizing = true;
  square = evt.target;
  circle = square.nextElementSibling;
  initialX = evt.clientX;
  initialY = evt.clientY;
  initialWidth = square.clientWidth;
}

function resizeCircle(evt) {
  if (!isResizing) return;
  const deltaX = evt.clientX - initialX;
  const deltaY = evt.clientY - initialY;
  const newWidth = initialWidth + deltaX;
  square.style.width = square.style.height = `${newWidth}px`;
  circle.style.width = circle.style.height = `${newWidth}px`;
}

function stopResize(evt) {
  isResizing = false;
}

function startDrag(evt) {
  if (evt.target.classList.contains('circle') && circle.style.pointerEvents === 'visiblePainted') {
    isDragging = true;
    circle = evt.target;
    offsetX = evt.clientX - circle.parentElement.getBoundingClientRect().left;
    offsetY = evt.clientY - circle.parentElement.getBoundingClientRect().top;

    circle.style.pointerEvents = 'none';

    document.addEventListener('mousemove', dragCircle);
    document.addEventListener('mouseup', stopDrag);
  }
}

function dragCircle(evt) {
  if (!isDragging) return;
  circle.style.pointerEvents = 'visiblePainted';
  const circles = document.querySelectorAll('.circle');
circles.forEach(circle => {
  circle.addEventListener('mousedown', startDrag);
  document.removeEventListener('mousemove', dragCircle);
  document.removeEventListener('mouseup', stopDrag);
} );
  evt.preventDefault();

  const x = evt.clientX - offsetX;
  const y = evt.clientY - offsetY;
  circle.parentElement.style.left = `${x}px`;
  circle.parentElement.style.top = `${y}px`;
}

function stopDrag(evt) {
  isDragging = false;}

const squares = document.querySelectorAll('.square');
squares.forEach(square => {
  square.addEventListener('mousedown', startResize);
  document.addEventListener('mousemove', resizeCircle);
  document.addEventListener('mouseup', stopResize);
});"

Ce que je veux
Dans le cadre d un atelier physique/informatique pour le periscolaire :
faire un cercle qui peux glisser, s'agrandir et supperposer les couleurs. Pour mettre en evidence la synthese additive et soustractive.

Ce que j'obtiens

Le resize fonctionne mais le drag non un petit panneau stationnement interdit appararait

Aucune réponse