How can I drag a div and keep the cursor on the same spot as I clicked it at?

Question

I'm trying to drag a div when I click on it but when I do it the div blinks and moves to the left, if I remove offset and put position instead it works but the cursor goes to the left top of the div.

var selected = 0,
  x = 0,
  y = 0;

$.fn.isDraggable = function() {

  $(this).on('mousedown', function(e) {
    selected = $(this);
    $(selected).css({
      position: 'absolute',
      left: e.pageX - $(selected).position().left,
      top: e.pageY - $(selected).position().top
    });
  });
  $(document).on('mouseup', function() {
    if (selected !== 0) {
      selected = 0;
    }
  });
  $(document).bind('mousemove', function(e) {
    $(selected).css({
      position: 'absolute',
      left: e.pageX - $(selected).offset().left,
      top: e.pageY - $(selected).offset().top
    });
  });

  return true;
};


$('#card').isDraggable();

#card {
  position: fixed;
  width: 100px;
  height: 150px;
  top: calc(50% - 75px);
  left: calc(50% - 50px);
  border: 1px solid #D3D3D3;
}

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>freeMarketRocks</title>

</head>

<body>
  <div>

    <div id="card">
    </div>

  </div>
</body>

</html>

Why you didn't used jQueryUI draagable ? https://jqueryui.com/draggable/ — TCHdvlp, Mar 10 '16 at 13:28
There is an issue in your conception. You must rework event binding, let me see what can I do to help you... — TCHdvlp, Mar 10 '16 at 13:40
You would need to offset for the mouses position within the element in order for it to not be in the corner — Binvention, Mar 10 '16 at 13:43
@Binvention That's exacly what I'm trying to accomplish but I don't know a command to get the cursor position relative to the div — Kyle, Mar 10 '16 at 13:45
You could calculate it using the elements position on the page wha the dimensions of the element itself — Binvention, Mar 10 '16 at 13:51
Try looking at this question http://stackoverflow.com/questions/3234256/find-mouse-position-relative-to-element — Binvention, Mar 10 '16 at 13:53

score 1 · Accepted Answer · edited Mar 10 '16 at 14:44

You have 2 problems here. First your event handler logic might result in a performance waste as you are asking your browser to constantly check for mouse movement, even if its not necessary.

Second, the calculation of the box coordiante is wrong, it must take the initial position in account. That's the purpose of my deltaX and deltaY variables in the fiddle

Here's a working fiddle https://jsfiddle.net/TCHdevlp/t2bapq5y/

Or Here:

  var selected = 0,
    x = 0,
    y = 0,
    boxX = 0,
    boxY = 0;

  $.fn.isDraggable = function() {

    $(this).on('mousedown', function(e) {
      selected = $(this);
      //get initial positions
      x = e.pageX;
      y = e.pageY;
      BoxX = $(selected).offset().left;
      BoxY = $(selected).offset().top;
      //bind mousemove
      $(document).bind('mousemove', function(e) {
        //compute new coordinate
        deltaX = e.pageX - x;
        deltaY = e.pageY - y;
        $(selected).css({
          position: 'absolute',
          left: (BoxX + deltaX),
          top: (BoxY + deltaY)
        });
      });
    });
    //unbind when finished
    $(document).on('mouseup', function() {
      if (selected !== 0) {
        $(document).unbind("mousemove");
        selected = 0;
      }
    });

    return true;
  };


  $('#card').isDraggable();

#card {
  position: fixed;
  width: 100px;
  height: 150px;
  top: 10x;
  left: 10px;
  border: 1px solid #D3D3D3;
}

<div>

  <div id="card">
  </div>

</div>

score 0 · Answer 2 · answered Mar 10 '16 at 14:04

var selected = 0,
  x = 0,
  y = 0;

    $.fn.isDraggable = function() {

     var moveFrame, comStartX, comStartY, startMousePosX, startMousePosY;
 $(this).on('mousedown', function(e) {
  selected = $(this);
  moveFrame = true;
  comStartX = $(this).position().left;
  comStartY = $(this).position().top;
  startMousePosX = e.pageX;
  startMousePosY = e.pageY;
 });
        $(document).on('mouseup', function() {
  moveFrame = false;
        });
  

   $(document).bind('mousemove', function(e) {
        if (moveFrame){
      currPosX = comStartX + (e.pageX - startMousePosX);
      currPosY = comStartY + (e.pageY - startMousePosY);
      $(selected).css({position: 'absolute', 'left': currPosX + 'px', 'top': currPosY + 'px'});
     }
      });

  return true;
    };


$('#card').isDraggable();

#card {
  position: fixed;
  width: 100px;
  height: 150px;
  top: calc(50% - 75px);
  left: calc(50% - 50px);
  border: 1px solid #D3D3D3;
}

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>freeMarketRocks</title>

</head>

<body>
  <div>

    <div id="card">
    </div>

  </div>
</body>

</html>

How can I drag a div and keep the cursor on the same spot as I clicked it at?

2 Answers2