Map-widget-like, draggable <div>

Question

I'd like to embed my custom HTML in an area that is draggable, like the JavaScript Map widgets.

For example, I want to put a 1000x1000 <div> inside a 480x320 <div>, without scrollbars (overflow:hidden) and be able to adjust the position of the inner layer by dragging it with the mouse. Ideally I'd like to catch scroll events too.

I could implement it myself, but I'm wondering if there's a ready-to-use, well-tested cross-browser piece of JavaScript that could do this for me. Ideally a jQuery plugin.

Answer 1

I think you may be able to use the Draggable plugin, and just make the container smaller than the draggable div.

In the example on that page, if you make the #demo-frame smaller than .demo, I think it gives the effect you are looking for.