Middle

Tâche : faire glisser avec la souris Il faut permettre de cliquer sur le bouton de la souris sur une boîte colorée et la faire glisser tant que le bouton est enfoncé.

sobes.tech IA

Réponse de l'IA

Для реализации перетаскивания цветного бокса мышью можно использовать события mousedown, mousemove и mouseup в JavaScript. При нажатии кнопки мыши на боксе фиксируем начальные координаты курсора и позицию элемента, затем при движении мыши обновляем позицию бокса, пока кнопка не отпущена.

Пример реализации на чистом JS:

<div id="box" style="width:100px; height:100px; background-color:tomato; position:absolute; top:100px; left:100px; cursor:pointer;"></div>

<script>
  const box = document.getElementById('box');
  let isDragging = false;
  let startX, startY, origX, origY;

  box.addEventListener('mousedown', (e) => {
    isDragging = true;
    startX = e.clientX;
    startY = e.clientY;
    const rect = box.getBoundingClientRect();
    origX = rect.left;
    origY = rect.top;
    e.preventDefault();
  });

  document.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const dx = e.clientX - startX;
    const dy = e.clientY - startY;
    box.style.left = origX + dx + 'px';
    box.style.top = origY + dy + 'px';
  });

  document.addEventListener('mouseup', () => {
    isDragging = false;
  });
</script>

Такой подход позволяет зажать мышь на боксе и перетаскивать его по экрану, пока кнопка мыши удерживается.

Précédent Suivant