Question

OnClick我们在asp：面板中加载一个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效果很好。

这是几个很好的例子的官方链接 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>

如果一切都正确完成，它应该有效

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>

希望这有助于其他人。

如何使用AjaxControlToolKit使asp：panel draggable w / o

3 个答案: