[OpenLayers-Users] jquery draggable item to go on top of my openlayers map

Mon May 21 09:16:42 PDT 2012

Hello,
I am trying to get a jquery draggable item to go on top of my openlayers 
map.  Unfortunately it always goes behind the map.  Does anyone in this 
community have any experience with this that can point me in the right 
direction? Here is my code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>NEMAC OpenLayers GIS Viewer Dev</title>
<script src="libs/ol21/lib/OpenLayers.js"></script>
<script type="text/javascript" src="libs/jquery18/jquery-1.7.2.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" href="libs/jquery18/themes/base/jquery.ui.all.css">
<script src="libs/jquery18/ui/jquery.ui.core.js"></script>
<script src="libs/jquery18/ui/jquery.ui.widget.js"></script>
<script src="libs/jquery18/ui/jquery.ui.mouse.js"></script>
<script src="libs/jquery18/ui/jquery.ui.draggable.js"></script>
<link rel="stylesheet" href="../demos.css">
</head>
<style>
         body {
             margin: 0;
             padding: 0;
         }
         #banner {
             background-color: Whitesmoke;
             margin: 0;
             padding: 1px 0 0 0;
         }
         #mainMenu {
             width:100%;
             margin-bottom:.2em;
         }
         #content {
             width:100%;
         }
         #draggable { width: 150px; height: 150px; padding: 0.5em;}
</style>
<script>
         $(function() {
             $( "#draggable" ).draggable();
         });
</script>
<body onload="init();">
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
<div id="banner">
         NEMAC OpenLayers Viewer
<div id="mainMenu" align="center">
          Theme:<select id="themeCombo"></select>
</div>
</div>
<div id="content">
<div id="mainMap"></div>
</div>
</body>
</html>

-- 
Derek @ NEMAC