I have the following libraries referenced:

jquery

jquery.ui.core.js

jquery.ui-1.8.custom.js

jquery.ui.widget.js

jquery.ui.draggable.js

ui.datepicker.js

interface_1.2

jquery.form.js

My code has a loop based on records in a db table. As it loops it includes code which has a form relevant to the db row id. The form is hidden. When a person clicks on a link this form appears allowing them to enter information etc and submit for that record id. The form is also draggable (which works). 

Loop through db rows:

Main page <div> 

      include form code: 

      <div id=formDbRowid1>

            <div></div>

            <div></div>

      </div>

</div>

....

The problem I am having is that when the form is dragged over a lower main page section it goes behind it. Drag the form over a higher on the page main section - form stays in front. [It is the same if I clicked on two forms - the first will not drag to the front of the second]

I have tried manipulating the zIndex on stop: function of the .draggable - the form stays behind [tried zIndex of a 1000 or higher - there are no elements with zIndex values even close to this].

1. $('#jsdiv' + report_id).draggable(
2. {
3.       drag: function (event, ui) { $(this).css("opacity", "0.6"); },
4.       stop: function (event, ui) { $(this).css({"opacity" : "1.0", "z-Index" : "1000"}); }
5. });

Thanks