Placing jQuery Draggable into temporary div on dragstart - Maintain element's position under the mouse, Don't disrupt anything else on page.

Question

Hi all,

I'm having some jQuery UI problems.

Here's the basic scenerio:

• I would like to drag something from 1 place to another- dropping it in the other place.
• I have three states: Toolbox (where the element starts), Limbo (where the element lives when its moving), and DropArea (where the element will end up if its dropped inside this area)

Here's my problem:

• In my dragstart function, when I move my element from Toolbox to Limbo, the relative positioning gets messed up.
• Also limbo gets space on the page because I just appended an element to it. This messes up my layout
• When I change from Limbo to DropArea, the position also gets messed up.

This is what I want:

• No change in element position when I take something out of the Toolbox and put it in Limbo.
• No disruption in the page layout when an element is appended to Limbo.

Considerations (Possible Solutions):

• Figure out a way of preventing jQuery from converting my Position from absolute to relative.. That would be nice.

Thanks in advance!