Creé un div simple que se puede arrastrar y funciona bastante bien, pero cuando trato de arrastrarlo, el cursor del mouse salta, ¿qué está mal aquí?
var $dragging = null; $(document.body).on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY, left: e.pageX }); } }); $(document.body).on("mousedown", ".titleDraggble", function (e) { $dragging = $(e.target); }); $(document.body).on("mouseup", function (e) { $dragging = null; }); .titleDraggble { width: 40px; height: 40px; position: absolute; left: 20px; top: 20px; border: 1px solid #000; cursor: move; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="titleDraggble"></div>body es solo un pequeño elemento en algún rincón.e.pageY and e.pageX pero calcule también con las dimensiones del elemento. var $dragging = null; $(document.body).on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY - $dragging.width() / 2, left: e.pageX - $dragging.height() / 2, }); } }); $(document.body).on("mousedown", ".titleDraggble", function(e) { $dragging = $(e.target); }); $(document.body).on("mouseup", function(e) { $dragging = null; }); .titleDraggble { width: 40px; height: 40px; position: absolute; left: 20px; top: 20px; border: 1px solid #000; cursor: move; } body { width: 100%; height: 100vh; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="titleDraggble"></div>Si desea evitar que el cursor del mouse salte, debe tener en cuenta el desplazamiento del mouse en relación con el elemento de destino.
var $dragging = null; var offsetx = null; var offsety = null; $(document.body).on("mousemove", function(e) { if ($dragging) { $dragging.offset({ top: e.pageY - offsety, left: e.pageX - offsetx }); } }); $(document.body).on("mousedown", ".titleDraggble", function (e) { var rect = e.target.getBoundingClientRect(); offsetx = e.clientX - rect.left; offsety = e.clientY - rect.top; $dragging = $(e.target); }); $(document.body).on("mouseup", function (e) { $dragging = null; }); .titleDraggble { width: 40px; height: 40px; position: absolute; left: 20px; top: 20px; border: 1px solid #000; cursor: move; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="titleDraggble"></div>Si incluye jqueryUI, puede usar la función arrastrable:
$('.titleDraggble').draggable()