Taak: slepen met de muis Het moet mogelijk zijn om op een gekleurde doos te klikken en deze te slepen terwijl de knop ingedrukt is.

Для реализации перетаскивания цветного бокса мышью можно использовать события 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>

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