jquery - Mouse drag to scroll content -

i'm working on gallery drag scroll trough images in gallery, similar this.

the drag detection working fine, don't sliding of content work properly. detects dragging , manages set proper position, jumps beginning when drag again.

this how function runs on drag looks like:

dragcontent: function(e) {      var delta = e.pagex - project.dragstartx;     project.isie ? $('#gallery-content').css("margin-left", delta) : $('#gallery-content').css("translatex", delta);  },   

have @ jsfiddle have recreated problem.

i think need save position content stops , somehow start position on next drag detected. want smooth easing example, still rolls bit on "mouseup".

i'm hoping want share thoughts on how solve without using plugins.

you need store current state of slider. right now, you're correctly calculating delta, distance mouse (or pointer) has traveled. you're setting delta margin, meaning start @ 0.

i modified code, can find solution in fiddle.

in addition dragstartx, introduced containerx , tempcontainerx

// beginning of code dragstartx = 0; containerx = 0; tempcontainerx = 0; 

on mousedown, update containerx (which "where box started")

containerx = containerx + tempcontainerx; 

on drag, use initial offset correct position:

$('#gallery-content').css("margin-left",containerx + delta);