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...