2

есть например div как передвигать его мышкой? всмысле чтобы двигался как мышка, был под мышкой, незнаю как обьяснить, всмысле как drag только без drag а как hover

0

2 ответа 2

5

const cursor = document.querySelector('.cursor');

document.addEventListener( 'mousemove', e => {
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';
});
.cursor {
  width: 30px;
  height: 30px;
  transform: translate(-50%,-50%);
  position: absolute;
  background-color: red;
}
<div class="cursor"></div>

2

Вариант на jQuery.

Плюс этого варианта в том, что элемент вместе с курсором уходит за пределы экрана в случае, если курсор покидает видимую часть.

$(document).mousemove(
  function(position) {
    $("#cursor").show();
    $("#cursor").css('left', (position.pageX - 10) + 'px').css('top', (position.pageY - 10) + 'px');
  }
).mouseleave(function() {
  $("#cursor").hide();
});
body {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#cursor {
  position: absolute;
  z-index: 999;
  top: -20px;
  left: -20px;
  width: 20px;
  height: 20px;
  background: red;
  border-radius: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cursor"></div>

1
  • 3
    На body лучше не вешать обработчики, связанные с мышкой или касаниями. Потому что body может быть меньше документа. В вашем случае например у него есть отступ и есть небольшой баг в начале. Достаточно просто заменить на $(document)...... Это особенно важно при создании ползунков, скролов и так далее, когда нажатая мышь может уходить за пределы браузера без отпускания, и затем возвращаться. В случае с документом поведение ползунка не будет прерываться.
    – user347472
    19 янв 2021 в 14:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.