How do I allow the user to move an absolutely positioned div?

Question

I am using jQuery to create a "dialog" that should show up in the center of the page on top of everything and should remain centered at all times unless the user moves it. It has a header area (like a title bar) and I would like the user to be able to click there and drag the dialog "window" around. It is an absolutely positioned div. What is the best way to do this?

EDIT: I failed to mention that I would like to do it without jQuery UI if it's not terribly difficult. But I will look into how jQuery UI does it though. I may end up using it.

Answer 1

Use jQuery UI's Drag (and drop) functions.

Something like this (in its simplest form):

$("#myDiv").draggable();

Answer 2

Check out jQuery UI Dialog, and Draggable.