Grabbing

Basic grabbing with jQuery

HTML

<div class="photos"> 
    <div class=/>
    <img src="http://kulesh.info/dev/thumbnails/1258802567_cover_img_5502edit_stock_opt_small.jpg"/> 
    <img src="http://kulesh.info/dev/thumbnails/1258971355_nepal_ticketing_booth_img_1435_small.jpg"/> 
    <img src="http://kulesh.info/dev/thumbnails/1258971001_ch_beijing_street_img_4712edit_small.jpg"/> 
    <img src="http://kulesh.info/dev/thumbnails/1258971060_ru_novosibirsk_img_2891_small.jpg"/> 
</div> 
<small>Photos by <a href="http://kulesh.info/">Stas Kulesh</a></small>

CSS

.photos {
    overflow: auto;
    white-space: nowrap;
}
.img {
    width: 300px;
    height: 900px;
}

JavaScript

var dragging = false;
var x;
var posX = 0;
var destX = 0;
var photos = $(".photos");
 
photos.mousedown(function(event){
    dragging = true;
    x = event.clientX;
    event.preventDefault();
});
 
$(window).mousemove(function(event){
    if (dragging) {
        destX += x - event.clientX;
        x = event.clientX;
        
    }
    
});

// use ease out equation
// change damping, higher is slower/smoother
var damping = 22;
var loop = setInterval(function(){
    posX += (destX - posX) / damping;
    photos[0].scrollLeft = posX;
},30);
 
$(window).mouseup(function(event){
    dragging = false;
});