AjaxControlToolKitを使用してasp：panel draggableを作成する方法

Question

OnClick asp：panelにusercontrolをロードします。それはうまく動作します。モーダルポップアップとして表示されます。問題は（と私は高低を見てきました）これをドラッグ可能にする方法はありますか？

私が見つけた唯一のものは、これを使用することです：

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

私はむしろajaxcontroltoolkitを含める必要はありませ思います。

私のImageButton：

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

モーダルポップアップパネル：

<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> 

分離コード：

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); 
     } 

Answer 1

私は素晴らしい結果とjqueryのを使用。

これは

EDIT

jqueryのUIをダウンロードして、プロジェクト内の以下のファイルが含まれますが、あなたが必要なすべてを見つける必要があります偉大な例 http://jqueryui.com/demos/draggable/

のカップルと公式のリンクがあり、ページ内のこのコード

<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> 

あなたのpannelにクラスを追加するだけですIKEこの

<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> 

すべてが正しく行われている場合は、パネルを作る

Answer 2

を動作するはずです（DIVとしてレンダリング）ドラッグはJavaScriptのみで行うことができます。 jQueryやPrototype/ScriptacolousなどのJavaScriptライブラリをチェックしてください。これらのサポートは、操作のこの種

Answer 3

は（！申し訳ありませんあなたは$のASP機能の検索を行う必要があるでしょう...非常に便利です）頭にこれを追加します。

<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> 

を、これは他の誰かに役立ちます願っています。