Как сделать перемещение блока от движения мыши?

Чтобы реализовать перемещение блока от движения мыши в JavaScript, вам понадобится использовать события мыши и изменять позицию блока на странице. Ниже приведен подробный пример кода, демонстрирующий эту функциональность:

HTML:

<div id="block" style="width: 100px; height: 100px; background-color: red; position: absolute;"></div>

JavaScript:

var block = document.getElementById('block');
var isDragging = false;
var offsetX, offsetY;

// Функция, вызываемая при начале перетаскивания
function startDragging(e) {
  isDragging = true;
  
  // Сохраняем начальные координаты мыши и позиции блока
  offsetX = e.clientX - parseInt(block.style.left);
  offsetY = e.clientY - parseInt(block.style.top);
}

// Функция, вызываемая при перетаскивании
function drag(e) {
  if (isDragging) {
    // Вычисляем новую позицию блока на основе текущих координат мыши и сохраненных смещений
    var x = e.clientX - offsetX;
    var y = e.clientY - offsetY;
    
    // Устанавливаем новую позицию блока
    block.style.left = x + 'px';
    block.style.top = y + 'px';
  }
}

// Функция, вызываемая при окончании перетаскивания
function stopDragging() {
  isDragging = false;
}

// Привязываем обработчики событий к блоку
block.addEventListener('mousedown', startDragging);
block.addEventListener('mousemove', drag);
block.addEventListener('mouseup', stopDragging);

В этом примере мы добавляем обработчики событий mousedown, mousemove и mouseup к блоку с помощью метода addEventListener. При нажатии кнопки мыши (mousedown) вызывается функция startDragging, которая устанавливает флаг isDragging в true и сохраняет начальные координаты мыши и позиции блока. При движении мыши (mousemove) вызывается функция drag, которая вычисляет новую позицию блока на основе текущих координат мыши и смещений, и обновляет стили блока соответствующим образом. При отпускании кнопки мыши (mouseup) вызывается функция stopDragging, которая устанавливает флаг isDragging в false и завершает перемещение блока.

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