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

Ссылка скопирована
CSS HTML JavaScript
1 ответ

Приветствую! Каким образом можно написать решение, в котором будет перемещение блока в зависимости от движения мыши?

Принцип: есть блок с элементами размером > ширины экрана. При наведении мыши на примерно 1/4 экрана в правой части - двигаем блок влево. Отводим мышь - движение останавливается. Движение блока происходит до тех пор, пока не покажется конец блока (правая часть).

Тот же принцип должен быть при наведении на 1/4 экрана в левой части, только движение блока уже идет в правую часть.

Пример того, что хочу реализовать тут: https://wanda.net/directors/come-ferre/

Дополнительно:

Ответы:

а подсмотреть там? идея простая: слушаем mousemove, если курсор в нужно части от ширины экрана, то добавляем/отнимает translate по x, который естественно где-то храним, как вариант можно не translate, а scrollLeft, если overflow: hidden

  • Там минифированные скрипты на 900 строк кода)
    В теории понимаю, что нужно, но на практике не выходит

ищите в интернете свойства animation

Если вы хотите сделать анимацию не на нативном Js, то вот вам реакт библиотека https://github.com/atlassian/react-beautiful-dnd

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь
Лучший ответ
1
Дмитрий К. Ответ

Для реализации перемещения блока от движения мыши можно использовать JavaScript. Сначала нужно создать блок, который будет перемещаться, например:

<div id="movableBlock" style="width: 100px;height: 100px;background-color: #ccc;position: absolute;top: 0;left: 0"></div>

<div id="movableBlock" style="width: 100px;height: 100px;background-color: #ccc;position: absolute;top: 0;left: 0"></div>

Затем напишем скрипт, который будет обрабатывать движение мыши и передавать координаты для перемещения блока:

document.getElementById('movableBlock').addEventListener('mousedown', function(e) {
    let offsetX = e.clientX - this.getBoundingClientRect().left;
    let offsetY = e.clientY - this.getBoundingClientRect().top;
 
    document.onmousemove = function(e) {
        let newX = e.clientX - offsetX;
        let newY = e.clientY - offsetY;
 
        document.getElementById('movableBlock').style.left = newX + 'px';
        document.getElementById('movableBlock').style.top = newY + 'px';
    }
 
    document.onmouseup = function() {
        document.onmousemove = null;
    }
});

document.getElementById('movableBlock').addEventListener('mousedown', function(e) { let offsetX = e.clientX - this.getBoundingClientRect().left; let offsetY = e.clientY - this.getBoundingClientRect().top; document.onmousemove = function(e) { let newX = e.clientX - offsetX; let newY = e.clientY - offsetY; document.getElementById('movableBlock').style.left = newX + 'px'; document.getElementById('movableBlock').style.top = newY + 'px'; } document.onmouseup = function() { document.onmousemove = null; } });

Этот скрипт добавляет обработчик события mousedown к блоку, который запоминает начальные координаты блока относительно курсора мыши. Затем при движении мыши (mousemove) вычисляются новые координаты блока и он перемещается в соответствии с этими координатами. При отпускании кнопки мыши (mouseup) событие mousemove удаляется, что прекращает перемещение блока.

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

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов