Scroll the contents of a div by dragging. The scrollable is just a div with style overflow: auto or overflow: scroll. Factored out of Effects Treasure Chest since I was getting a good number of queries.

Availability

See code section below.

05Jul2006 Fixed a bug which killed tooltips in Firefox. But my understanding of event handling is a little weak so any comments are very welcome.

Uses

I use it for a document viewer to allow drag-scrolling of page images. Think about the hand tool in Adobe Reader and other applications.

Syntax


<div id="dragscroll1" style="overflow: auto">
  content
</div>

<script type="text/javascript">
 new DragScrollable('page')
</script>

Demo



Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris consequat ligula sit amet ligula. Phasellus tempus nulla ut massa. Fusce dui nunc, condimentum sit amet, fringilla quis, interdum vitae, libero. Quisque enim. Cras pharetra vestibulum metus. Integer at nibh. Sed tincidunt, sem ut luctus dignissim, ipsum nisi faucibus orci, sed dignissim libero sapien at tellus. Nunc lorem elit, pretium eleifend, feugiat sed, aliquam vel, nisi. Nullam erat nulla, pretium in, volutpat vitae, laoreet eu, metus. Aliquam gravida posuere felis. Vivamus vitae nibh.

Nunc ac sem sollicitudin tortor convallis feugiat. Morbi in libero. Donec consectetuer egestas odio. Aliquam commodo turpis. Sed faucibus lectus ac sapien. Donec in mauris. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent at velit et orci interdum pulvinar. Fusce ante neque, lacinia eget, ullamcorper id, cursus sit amet, nibh. Morbi faucibus nisl vitae leo. Integer ultrices, ligula id vulputate ultrices, metus justo pharetra arcu, sit amet fermentum felis nulla ac magna. Vestibulum mauris. Phasellus nec metus. Donec nec mauris.


Code


var DragScrollable = Class.create();
DragScrollable.prototype = {
  initialize: function(element) {
    this.element = $(element);
    this.active = false;
    this.scrolling = false;

    this.element.style.cursor = 'pointer';

    this.eventMouseDown = this.startScroll.bindAsEventListener(this);
    this.eventMouseUp   = this.endScroll.bindAsEventListener(this);
    this.eventMouseMove = this.scroll.bindAsEventListener(this);

    Event.observe(this.element, 'mousedown', this.eventMouseDown);
  },
  destroy: function() {
    Event.stopObserving(this.element, 'mousedown', this.eventMouseDown);
    Event.stopObserving(document, 'mouseup', this.eventMouseUp);
    Event.stopObserving(document, 'mousemove', this.eventMouseMove);
  },
  startScroll: function(event) {
    this.startX = Event.pointerX(event);
    this.startY = Event.pointerY(event);
    if (Event.isLeftClick(event) &&
        (this.startX < this.element.offsetLeft + this.element.clientWidth) &&
        (this.startY < this.element.offsetTop + this.element.clientHeight)) {
      this.element.style.cursor = 'move';
      Event.observe(document, 'mouseup', this.eventMouseUp);
      Event.observe(document, 'mousemove', this.eventMouseMove);
      this.active = true;
      Event.stop(event);
    }
  },
  endScroll: function(event) {
    this.element.style.cursor = 'pointer';
    this.active = false;
    Event.stopObserving(document, 'mouseup', this.eventMouseUp);
    Event.stopObserving(document, 'mousemove', this.eventMouseMove);
    Event.stop(event);
  },
  scroll: function(event) {
    if (this.active) {
      this.element.scrollTop += (this.startY - Event.pointerY(event));
      this.element.scrollLeft += (this.startX - Event.pointerX(event));
      this.startX = Event.pointerX(event);
      this.startY = Event.pointerY(event);
    }
    Event.stop(event);
  }
}