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

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

Задача: перетаскивание мышкой Нужно сделать возможность зажимать кнопку мыши поверх цветного бокса и перетаскивать его, пока кнопка зажата.