Middle

Užduotis: perkelti pelės pagalba Reikia padaryti, kad būtų galima paspausti pelės mygtuką virš spalvoto dėklo ir jį tempti, kol mygtukas yra paspaustas.

sobes.tech AI

Atsakymas iš 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>

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

Ankstesnis Kitas