2013-04-11 16:09:00

Slide navigation - jQuery draggable


Categories jquery animations

Couple of days ago I was looking for a plugin or something simmilar to simulate elastic dragging, somewhat alike with android/ios screen navigation. I got bored after 2 minutes of research and decided to write a little script for this matter. It is quite easy thing to do. First of all we have to make our main outside container draggable. Inside our draggable div we should place all of our pages, make them vertical or horisontal, it doesn't matter...they just have to be absolute position with correct top or left offset.
Now for the coding.. let's take a look:


axis: "x", // or "y" if we want vertical navigation
start: function(event, ui) {
// store current draggable position here via ui.position.left or .top
stop: function(event, ui) {
// Store final draggable position here too via ui.position.left or .top
// Subtract one from another and you will get in what direction we moved our mouse.. left or right. Knowing this means we know if we should show next or previous page.
// Now depending on direction we can force smooth animation  like this $('#draggable').animate({ left or top: $(window).width() * (our current page + or - 1) })

In the demo related to this post I'm considering some other minor things like blocking the following drags until the animation is complete and also if the drag is very small, then the animation will bounce back. To bounce back you just need to check if delta X or Y (difference between starting and ending position) is less than our tolerance value (150 in my demo).

Please check the demo here:

2 responses to "Slide navigation - jQuery draggable"

Justin C.

2013-05-30 09:44:38

Hey man. Thanks for the mini tutorial, this was just what I was looking for. A piece of advice: comment the code a bit more. Thanks


2014-07-21 09:17:30

Olá Nikolai. O teu script tá fixe, mas há algumas coisas que podes melhorar: - o tempo da animação ser uma função da distância à posição inicial: quando arrastas de longe deve demorar mais tempo do que se for, p ex, 10px; - ter em conta a velocidade do rato. No momento em que se larga o rato, a velocidade da imagem deve corresponder à do rato; - quando se arrasta rápida e repetidamente uma imagem, ela salta muito.

Leave a comment