OpenLayers jQueryUI Draggable

Question

I am using OpenLayers to render a WMS inside of a div tag. This is right out of the OpenLayers documentation. My WMS layer is rendering well.

<div id="map"></div>

Using the jQuery UI documentation I have been able to create a draggable div tag that will, hopefully, house controls for editing vector features. Using the code below I am able to draw my draggable box.

JavaScript:

$('#makeMeDraggable').draggable();

HTML:

<div id="map">
<!--Sample Box using jQuery UI-->
<div id="makeMeDraggable"></div>
</div>

I was able to get overlap working by setting the map position to absolute and assigning appropriate z-indices to each div. (In the CSS file)

#map{ position:absolute; z-index:1;}
#makeMeDraggable{z-index:2;}

This allows the box to be dragged around the map's "container" (div tag) without issue. I am struggling to figure out how to have the map's position remain constant as I drag the box? The map is registering an onClick event over the entire page and so the box and map move in tandem. I am relatively new to jQuery and OpenLayers. I am probably missing something straight forward in the documentation?

Edit: URL to jsfiddle.net for anyone interested in checking out this problem. The map displays after zooming once. I still need to modify that...

http://jsfiddle.net/Dn3fw/

Answer 1

Please put your code, or a short version, at http://jsfiddle.net/ so we can play with it.

Also try:

<div id="map"></div>

<div id="makeMeDraggable"></div>