Middle

Uzdevums: vilkt ar peli Jānodrošina iespēja noklikšķināt uz peles pogas virs krāsainas kastes un to vilkt, kamēr poga ir nospiesta.

sobes.tech AI

Atbilde no AI

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

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

Iepriekšējais Tālāk