I have created a simple draggable div and its working somewhat good but when I try to drag it the mouse cursor is jumping, what is wrong here?

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

1. You need to define the body height/width to be able to detect the events on the whole page. Without doing that, the body is only a small element somewhere in corner.
2. After clicking on the element, do not move it to e.pageY and e.pageX but calculate with the element dimensions as well.

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you want to prevent the mouse cursor from jumping, you must take into account the offset of the mouse in relation to the target element.

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

If you include jqueryUI, you can use draggable function:

  $('.titleDraggble').draggable()

https://jsfiddle.net/jdpzL6yx/