如何使用 AjaxControlToolKit 使 asp:panel 可拖动 w/o

Posted 2023-05-08

【中文标题】如何使用 AjaxControlToolKit 使 asp:panel 可拖动 w/o

【英文标题】：How to make asp:panel draggable w/o using AjaxControlToolKit

【发布时间】：2011-06-24 22:12:49

【问题描述】：

OnClick 我们在 asp:panel 中加载一个用户控件。这很好用。它显示为模式弹出窗口。问题是（而且我看起来高低）有没有办法让这个“可拖动”？

我发现的唯一方法是使用这个：

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

我宁愿不必包含 ajaxcontroltoolkit。

我的图片按钮：

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

【参考方案1】：

我使用 jquery 效果很好。

这是带有几个很好例子的官方链接 http://jqueryui.com/demos/draggable/

你应该在那里找到你需要的一切

编辑

下载 jquery ui 并将以下文件包含在您的项目中，并将此代码包含在页面中

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

现在只需像这样向您的面板添加一个类

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

如果一切正常，它应该可以工作

【参考方案2】：

使面板（呈现为 div）可拖动只能在 JavaScript 中完成。所以检查 jQuery 或 Prototype/Scriptacolous 或其他一些 JavaScript 库。这些支持这种操作

【参考方案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>  

希望这对其他人有所帮助。