using jquery inside ajaxcontroltookit's modal popup extender

Question

I am having difficulty using jQuery's draggable functions inside of an ajaxcontroltoolkit's modal pop up extender. If i use this code outside of the panel that gets extended, it works fine but once it's inside the panel, I can no longer drag the item. I think this has something to do with the fact that the panel starts of as not visibile and then gets changed when a user clicks a button (Maybe the item is not initially in the DOM). Does anyone know how to get these two things to play well together? Bellow is my code:

    <asp:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="Panel1" Radius="20">
    </asp:RoundedCornersExtender>

    <asp:button id="Button1" runat="server" text="Button" CssClass="hidden" />

    <asp:modalpopupextender id="ModalPopupExtender1" runat="server" 
            cancelcontrolid="btnCancel" 
            targetcontrolid="Button1" popupcontrolid="Panel1" 
            popupdraghandlecontrolid="PopupHeader" drag="true" 
            backgroundcssclass="ModalPopupBG">
    </asp:modalpopupextender>

    <asp:panel id="Panel1" runat="server"  class="manageLoopsPanel">  
          <div id= 'someId' class="draggable1 ui-widget-content" style="border:1px solid black;">
               <table>
                   <tr>
                     <td>
                        <asp:Label ID="DOBLabel" runat="server" Text='22' />
                        <asp:Label ID="Label2" runat="server" Text='33' />
                     </td>
                   </tr>
                 </table>
          </div>     
    </asp:panel>

And my jQuery looks like this:

           $(function () {
                $(".draggable1").draggable({
                    helper: 'clone',
                    zIndex: '5000',
                    scroll: false,
                    revert: "invalid",
                    appendTo: 'body',
                    drag: function (event, ui) {
                    }
                });

Answer 1

In my opinion use orangebox for popup. dont use jquery with ajax update panel. but if you insist then do the following
When you use Update panel it will render you page partially so you have to use something which will postback your page and take a look at the code below

     <asp:UpdatePanel ID="AjaxPanel" runat="server" UpdateMode="Conditional" ClientIDMode="Static">
            <ContentTemplate>
<!-- all your code goes here -->
      </ContentTemplate>
            <Triggers>
                <asp:PostBackTrigger runat="server" ControlID="Button1" />  <!-- that will be the button which will fully postback by clicking on it. -->        
            </Triggers>
        </asp:UpdatePanel>

let me know if this helps for further explanation read this article.