DragPanel:可在页面中拖动的窗口

最新推荐文章于 2024-09-08 07:34:30 发布

Kalen_Chen

最新推荐文章于 2024-09-08 07:34:30 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： AJAX ASP.NET系列文章标签： server asp div stylesheet scroll class

本文链接：https://blog.youkuaiyun.com/Kalen_Chen/article/details/1654702

AJAX ASP.NET系列专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用DragPanel扩展器实现可拖动面板的方法。通过设置目标Panel及拖动区域，用户可以在网页上自由移动该面板。示例代码展示了如何在ASP.NET AJAX环境中配置并使用此功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DragPanel扩展器控件可以让某个Panel控件浮动在页面之上，用户可以通过鼠标拖动该Panel中的指定区域在页面中异动该Panel。
示例运行效果：

图(1)

图(2)

DragPanelDemo.aspx代码示例：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragPanelDemo.aspx.cs" Inherits="Chapter09_DragPanelDemo" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>DragPanel Demo</title>

/*Drag Panel*/

.dragMe

{

width:100%;

height:21px;

background-color:#FFF;

background-image:url(images/header-opened.png);

text-align:center;

cursor:move;

font-weight:bold;

}

.overflowHidden {overflow:hidden;}

.overflowScroll {overflow:hidden;}

</style>

</head>

<body>

<asp:ScriptManager ID="sm" runat="server" />

<div class="demoheading">可在页面中拖动的窗口</div>

<asp:Panel ID="floatPanel" runat="server" Width="250px" style="z-index:20;">

<asp:Panel ID="floatPanelHandle" runat="server" Width="100%" Height="20px"

BorderStyle="solid" BorderWidth="2px" BorderColor="black">

</asp:Panel>

<asp:Panel ID="floatPanelContent" runat="server" Width="100%" Height="250px"

Style="overflow:scroll;" BackColor="#0B3D73" ForeColor="whitesmoke"

BorderWidth="2px" BorderColor="black" BorderStyle="solid">

<div>

<p>This panel will reset its position on a postback or page refresh.</p>

<hr />

<p>

ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications.

This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework.

In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages.

And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication.

However, AJAX isn't just for ASP.NET.

You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.

</p>

</div>

</asp:Panel>

<ajaxToolkit:DragPanelExtender ID="dpe" runat="server"

TargetControlID="floatPanel"

DragHandleID="floatPanelHandle" />

<!--

TargetControlID：该扩展器目标Panel控件的ID，即将要浮动的页面中的Panel控件的ID

DragHandleID：目标Panel控件中作为可拖放区域的Panel的ID

Location：目标Panel控件的当前位置

-->

</div>