Как передвигать обьект мышкой

Question

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

Answer 1

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>

Answer 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>

БЛОГ НА HUSL

Как передвигать обьект мышкой

Ответы (2 шт):