jquery.dragscroll.js

(function($){
  $.fn.dragscroll = function(target){
    // Initializing some locals
    var positionWhenScrollStarted
    var scrollWhenScrollStarted

    var self = this
    // The object that is scrolled when this/self is dragged
    var targetDOMObject = $(target)

    // Performs the scrolling when someone clicks and drags self..
    var scrollOnMouseMove = function(obj){
      var currentPosition = {x: obj.clientX, y: obj.clientY}
      var difference = {
        x: (positionWhenScrollStarted.x - currentPosition.x),
        y: (positionWhenScrollStarted.y - currentPosition.y)
      }

      targetDOMObject.attr('scrollLeft', scrollWhenScrollStarted.x + difference.x)
      targetDOMObject.attr('scrollTop', scrollWhenScrollStarted.y + difference.y)
    }

    self.mousedown(function(element){
      positionWhenScrollStarted = {x: element.clientX, y: element.clientY}
      scrollWhenScrollStarted = {x: targetDOMObject.attr('scrollLeft'), y: targetDOMObject.attr('scrollTop')}
      self.mousemove(scrollOnMouseMove)
      return false
    })

    self.mouseup(function(){ self.unbind('mousemove') })
    $(window).mouseout(function(){ self.unbind('mousemove') })
  }
})(jQuery)