Make Drag and Drop smoothly with jQuery

Question

I'm dealing with a problem in my drag and drop code. The code actually works, but i would like to do two things:

1. Make the movement smoother. The effect I'm looking for is something similar to this plugin http://draggabilly.desandro.com/ (see the first example). If you compare my code below and this one, you can see how smooth the second one is, (specially if you move it faster).

2. Fix drag movement bug. In my code, when you move the div faster, sometimes the div stop moving around, and only resume its movements whent the mouse's cursor enters again. I tried to resolve it with this code, but it doesn't work as i'd like to.

if (mouseX < offset.left && mouseX > offset.left + $('.movable').width()){
    $('.movable').css("left", mouseX);
}
if (mouseY < offset.top && mouseY > offset.top + $('.movable').height()){
    $('.movable').css("top", mouseY);
}

And here is the fiddle with my code:

 function endMove() { $(this).removeClass('movable'); } function startMove() { var offset = $('.movable').offset(); var mouseX = event.pageX; var mouseY = event.pageY; var posX = mouseX - offset.left; var posY = mouseY - offset.top; $('.movable').on('mousemove', function(event) { var thisX = event.pageX - posX, thisY = event.pageY - posY; $('.movable').offset({ left: thisX, top: thisY }); if(mouseX < offset.left && mouseX > offset.left + $('.movable').width()){ $('.movable').css("left", mouseX); } if(mouseY < offset.top && mouseY > offset.top + $('.movable').height()){ $('.movable').css("top", mouseY); } event.preventDefault(); }); } $(document).ready(function() { $("#containerDiv").on('mousedown', function() { $(this).addClass('movable'); startMove(); }).on('mouseup', function() { $(this).removeClass('movable'); endMove(); }); }); 

 #containerDiv { background:#333; position:absolute; width:200px; height:100px; cursor:move ; line-height:100px; text-align:center; color:#fff; border:#aaa 1px solid; } #containerDiv.movable { background:#ef0; color:#444; border:#000 1px solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="containerDiv"></div> 

I would like to do this two things using only jQuery (no UI, no plugins), is it possible?. Thanks in advance.

Answer 1

Hope this helps

 var TheDraggable = null; $(document).ready(function() { $('.draggable').on({ mousedown: function() { console.log('mousedown'); TheDraggable = $(this); $('html').addClass('cursormove'); }, mouseup: function() { console.log('mouseup'); TheDraggable = null; //console.log('mouseup'); $('html').removeClass('cursormove'); } }); $(document).mousemove(function(e) { if (TheDraggable) { var TheLeft = e.pageX; var TheTop = e.pageY; TheDraggable.css({ 'top': TheTop, 'left': TheLeft }); } }); }); 

 .draggable { position: absolute; height: 100px; width: 100px; background-color: #eee; border: 1px solid black; cursor: move; } .cursormove:hover { cursor: move; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="draggable">Drag me</div>