Grabbing

Basic grabbing with jQuery

by NV

HTML

<div class="photos"> 
    <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;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

JavaScript

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