Tengo un div que contiene algo de texto y quiero poder mover ese div cuando hago clic y mantengo presionado el botón izquierdo del mouse y cuando se cambia la ubicación del cursor del puntero, la ubicación del div también cambia. mi código js:
$(() => { $(document).on("mousemove", "#div", (e) => { const x = e.pageX const y = e.pageY $("#div").css("top", y - 50) $("#div").css("left", x - 100) console.log(e.pageY) console.log(e.pageX) }) })mi codigo html:
<div id="div"> <span>Hello World!</span> <span>Look at Me!</span> <span>I'm Moving!</span> </div>mi problema es que no sé usar qué evento. Quiero hacer clic y mover eventos juntos. ¿Qué debería hacer ahora?
Considere el siguiente ejemplo, basado en la siguiente demostración .
$(function() { $("#draggable").draggable({ drag: function(event, ui) { console.log(event.pageX, event.pageY); } }); }); #draggable { width: 150px; height: 150px; padding: 0.5em; } <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"></script> <div id="draggable" class="ui-widget-content"> <span>Hello World!</span> <span>Look at Me!</span> <span>I'm Moving!</span> </div>