Problem with jquery draggable div on TOP PAGE

Problem with jquery draggable div on TOP PAGE

I have a problem. I have a jquery script that collects data on a screen controls through an ajax post. When you get the data for each screen control it is creating dynamically.
however I have with these controls the draggable effect the div I want to move to another however I puts them behind the div.
I publish my html code (which is shown after creating the controls).
Can you help me please?
Thank you!

JQuery CODE

  1. var z=600000;
  2.  $(function(){
  3.  $(".Controles,.ChKControles").draggable({
  4.  cursor:"move",
  5.  revert:"invalid",
  6.  scroll:false,
  7.  //containment:"#drop-zone",
  8.  //stack:"#drop-panel",
  9. start:function(event,ui){
  10. $(this).css("z-index",z++);
  11.  },
  12.  drag:function(event,ui){
  13. $( this ).css({ top: ui.offsetY, left: ui.offsetX });
  14.  $(this).removeClass("AcceptPost");
  15.  $(this).removeClass("DeclinePost");
  16. $(this).addClass("OnDrag");
  17.  },
  18. stop:function(event,ui){
  19.  $(this).removeClass("OnDrag");
    // $(this).css("position","absolute");
  20.  }
  21.  });

HTML

Drag Code


  1. <div id="left-panel">
  2. <div id="Controls" class="DivTool">
  3. <div id="CtrlContent" runat="server" class="ContentStyle">
  4. <div id="53157" class="Controles ui-resizable ui-draggable">
  5. <div class="DivLabel"><label class="LblControles">
  6. Folio[Numerico]
  7. </label>
  8. </div>
  9. <div class="TxtControles">
  10. [AUTO]
  11. </div>
  12. <div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-e">
  13. </div>
  14. <div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-s">
  15. </div>
  16. <div style="z-index: 1000;" class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se">
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>
  22. </div>

Drop Code

  1. <div id="drop-panel">
  2. <div id="drop-zone">
  3. <table id="drop-controls">                       
  4. <tr style="width: 100%; height: 100%;" id="Row1">                           
  5. <td id="Column1">                          
  6.  </td>                       
  7. </tr>                   
  8. </table>               
  9. </div>           
  10. </div>
STYLE
  1. #drop-panel
    {
        position:fixed;
        left:280px;
        height:100%;
        top:276px;
        right:0px;
        bottom:0px;
        overflow:auto;
        background-color:#EBEBEB;
        z-index:0;   
    }










  2. .DivTool
    {
         position:relative;
         width:280px;
         height:58px;
         background-color:#58595B;
         border-top:solid 1px #414042;
         border-bottom:solid 1px #414042;
         z-index:50000000;
    }









  3. .ContentStyle
    {
       position:absolute;
       top:58px;
       bottom:0px;
       left:0px;
       right:0px;
       width:280px;
       height:auto;
       overflow:auto;
       overflow-x:hidden;
       background-color:#939598;
       border-top:solid 2px #414042;
        z-index:50000;     
    }













  4. .Controles
    {
        position: relative;
        margin:4px 4px 4px 4px;
        width:240px;
        height:60px;
        background-color:#666666;
        font-size:inherit;
    }