第十五篇: Ajax Control Toolkit 控件包--3. DragPanel (拖动效果）-优快云博客

本文介绍如何使用ASP.NET和AJAX实现一个可拖动的Panel控件。具体步骤包括：从指定母版页新建Web窗体，定义拖动范围，添加Panel及DragPanel控件，并设置样式。

1. 从母版页: MasterPage_Ajax.master 新建 Web窗体: DragPanel.aspx
2. 在 ContentPlaceHolder1 在加入一个 div , 这是能拖动的范围。

Code
<%@ Page Language="C#" MasterPageFile="~/MasterPage_Ajax.master" AutoEventWireup="true" CodeFile="DragPanel.aspx.cs" Inherits="DragPanel" Title="无标题页" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div style="height:600px; width:800px;"></div>
</asp:Content>

3. 添加一个 Panel 控件到 div 中。添加一个 Panel 控件到 Panel1 中。
4. 添加一个 DragPanel 控件。(设置 TargetControlID: Panel1,DragHandleID: Panel2)
5. 增加样式: .Panel1 .Panel2

Code
    <style type="text/css">
        .Panel1
        {
            background-color: #FF9900;
            height: 200px;
            width: 300px;
        }
        .Panel2
        {
            background-color: #CCCC00;
            cursor: move;
        }
        .style1
        {
            height: 600px;
            width: 800px;
        }
    </style>

6. 设置: Panel1 控件，Panel2 控件的 CssClass 属性为: .Panel1 , .Panel2