Tengo problemas para hacer que este div tenga la misma altura en la pantalla que el cursor. Actualmente, el div permanece estacionario. Esto es lo que tengo ahora:
<body> <div id="container"> <div id="mouseHover"></div> </div> <script> let box = document.getElementById('mouseHover'); var mousex = 0; var mousey = 0; // Listens for where the mouse is hovering function mouse(){ mousex = event.clientX; mousey = event.clientY; box.style.y = mousey; } document.addEventListener('mousemove', mouse); </script> </body> //Make the DIV draggagle: dragElement(document.getElementById("mouseHover")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; elmnt.onmousedown = dragMouseDown; function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } #container { width: 1700px; height: 100vh; } #mouseHover { width: 150px; height: 150px; border: 2px solid red; } .draggable { cursor: move; position: absolute; user-select: none; } <div id="container"> <div id="mouseHover" class="draggable"></div> </div>Traté de reproducir su problema y le hice algunos cambios. A continuación se muestra el código. Espero que así es como querías que funcionara.
Código de trabajo completo en fiddle: https://jsfiddle.net/jkp15cyo/1/