Manually moving a dialog.

Manually moving a dialog.

I've been looking for a way to manually move a dialog box (use case is that the positions and sizes of all dialogs on the screen are saved to a server and reloaded when a user logs in). In this case I need to use pixels.

I'm finding this incredibly hard to do (my google-foo is failing me). I can easily do this via setting the style.left and style.right of the element, but constraining doesn't update (move the dialog off the screen, it stays off the screen). I can manually recalculate and set it back, but this causes more problems with constrain (since I want to arbitrarily choose an element to constrain the dialogs in).
  1. var win=$(document.createElement('div'));
  2. win.dialog({modal:false});

  3. //Want (and the internet tells me something like this should be possible):
  4. win.dialog("option","position",[200,200]);

  5. //Can do (but I need pixels):
  6. win.dialog("option","position",{my:"left top",at:"left bottom",of:$(win).parent()});
I know what you're going to say, pass the x/y coordinate into the position argument in the constructor call. The login system does not require the page to be reloaded. So if the user changes workspaces or a different user logs in, I need to be able to resize and move all dialogs on the screen.

I've written this system several times...and I really just want to use something like JQuery instead...  Existing implementation (not JQuery).