Scroll DIV Horizontally with Mouse Events

Question

I have a layout as follows:

<div style="width: 300">
    <div style="width: 300">Some Content</div>
</div

I want to be able to mousedown in the content DIV and be able to move it left to right, or scroll it in other words :)

What would be the best way of being this?

I would prefer it in JavaScript mainly :)

Answer 1

Easiest would be to use Mootools or jQuery. Both have "drag" interfaces to handle this sort of thing, and handle all the cross-browser compatibility problems.

If you're fixed on rolling your own, then the basic process is to attach mousedown/mouseup events on the parent div to initiate the dragging stuff, slap a handler on mousemove to capture the motion events, and adjust the parent div's scroll offsets as appropriate.

Answer 2

Better add css to your div

div id {
width:300px;
height:300px;
overflow:scroll;
}

and write the JQuery or javascript you want to do.