How to make asp:panel draggable w/o using AjaxControlToolKit

OnClick we load a usercontrol in an asp:panel. That works fine. It appears as a modal popup. The question is (and I've looked high and low) is there a way to make this "draggable"?

The only thing I've found is by using this:

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/DragPanel/DragPanel.aspx

I'd rather not have to include the ajaxcontroltoolkit.

My ImageButton:

<asp:ImageButton ID="btnOpenBox" ImageUrl="~/images/open.gif" runat="server"
 OnClick="btnOpenBox_Click" />

The Modal Popup Panel:

 <asp:Panel ID="pnlMyModalBox" runat="server" Visible="false" HorizontalAlign="Left"
        Style="position: absolute; left: 75px; z-index: 50000; top: 100px;">
        <uc1:MyUserControl ID="mdMyUserControl" runat="server" Visible="false" />
    </asp:Panel>

The codebehind:

 protected void btnOpenBox_Click(object sender, ImageClickEventArgs e)
        {
            System.Web.UI.HtmlControls.HtmlGenericControl _body = (System.Web.UI.HtmlControls.HtmlGenericControl)this.Page.Controls[0].FindControl("Body1");
            _body.Attributes.Add("class", "modalBackground");
            mdJournalEntry.Visible = true;
            pnlBody.Enabled = false;

            pnlMyModalBox.Visible = true;
            pnlMyModalBox.Height = 开发者_开发百科Unit.Pixel(350);
            pnlMyModalBox.Width = Unit.Pixel(800);
        }

I used jquery with great results.

This is the official link with a couple of great examples http://jqueryui.com/demos/draggable/

You should find everything you need there

EDIT

Download the jquery ui and include the following files in your project and this code in the page

<script src="../../jquery-1.4.4.js"></script>
<script src="../../ui/jquery.ui.core.js"></script>
<script src="../../ui/jquery.ui.widget.js"></script>
<script src="../../ui/jquery.ui.mouse.js"></script>
<script src="../../ui/jquery.ui.draggable.js"></script>
//These include tags have to be in this exact order because the lower one depend on the first ones 
<script type="text/javascript">
$(document).ready(function() {
    dragAndDrop();
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(dragAndDrop); 
    //this makes the javascript method execute after an ajax action on the page
});

function dragAndDrop() {
    $( ".draggable" ).draggable();
}
</script>

Now simply add a class to your pannel like this

<asp:Panel ID="pnlMyModalBox" runat="server" class="draggable" Visible="false" HorizontalAlign="Left"
        Style="position: absolute; left: 75px; z-index: 50000; top: 100px;">
        <uc1:MyUserControl ID="mdMyUserControl" runat="server" Visible="false" />
    </asp:Panel>

If everything is done correctly it should work

Making a panel (renders as a div) draggable can only be done in JavaScript. So check jQuery or Prototype/Scriptacolous or some other JavaScript library. These support this kind of operations

Add this to the head (sorry you'll have to do a search for the $asp function.. very useful!):

<script type="text/javascript">
    $(document).ready(function() {
            $asp("pnlMyModalBox").draggable();
    });
        </script>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>  

Hope this helps someone else.