超酷代码- 使用ASP.NET AJAX进行拖放

超酷代码- 使用ASP.NET AJAX进行拖放2011-09-27 msdn.microsoft.com Jeff ProsiseAJAX 是对 Web 用户界面的一次变革，而 ASP.NET AJAX 使 AJAX 可以为 Visual Studio® 用户所使用。它的下载分为三个独立的部分：ASP.NET AJAX Extensions （asp.net/ajax/downloads），提供了一组核心的 AJAX 功能，并已经过全面测试；ASP.NET AJAX Futures （asp.net/downloads/futures），包含一些试验性的功能，产品组希望得到有关这些功能的反馈意见；以及 ASP.NET AJAX Control Toolkit （asp.net/ajax/ajaxcontroltoolkit/samples），提供各种 AJAX 控件以及一个可用于构建您自己控件的 SDK。

在这三个下载中，Futures 版本在开发人员社区最不受关注。这真让人感到遗憾，因为 Futures 社区技术预览（CTP）不仅提供了 ASP.NET AJAX 未来版本可能的样子，同时还包含所有可用于构建当今最前沿的 Web 应用程序的功能。拖放就是一个相关例子。

Futures PreviewDragDrop.js 文件隐含了对基于浏览器的拖放型用户界面提供丰富的支持。它所使用的模型是根据原先的 OLE 拖放模型设计的，其中由拖动源来实现 IDragSource 接口，由放置目标来实现 IDropTarget 接口，同时系统还提供了一个拖放管理器，将拖动源和放置目标连接起来。Futures 拖放管理器是一个 JavaScript 类的实例，名为 Sys.Preview.UI._DragDropManager，它会自动实例化并通过一个名为 Sys.Preview.UI.DragDropManager 的全局变量供使用。

近几个月来，我一直打算编写一个示例，说明如何使用 PreviewDragDrop.js 来实现真正的拖放，其特点是自定义拖动源和自定义放置目标。最后我终于完成了这项工作，结果也非常棒。在这个过程中我学到了很多关于 DragDropManager 的知识，包括如何通过添加对自定义拖动视觉效果的支持来增强它的功能。一旦您熟悉了该模型（并且了解了在 JavaScript 中派生类和实现接口的概念），DragDropManager 便为 Web 用户界面的使用打开一个全新的世界。

运行中的拖放

在深入探讨代码之前，请花一点时间下载本文附带的示例项目，然后快速运行一遍。请用 Visual Studio 的“打开网站”命令打开该示例，然后在浏览器中查看主页 DragDropDemo.aspx。要运行这个示例，必须先安装 ASP.NET AJAX Extensions。您无需下载和安装 Futures CTP，因为它已经在站点的 Bin 文件夹中了。

您将在页面顶部看到五个颜色样本，在页面底部看到一个标记为“Drop It Here（放置于此处） ”的空白框（请参见图 1）。颜色样本是拖动源，空白框是放置目标。用鼠标获取其中一个颜色样本，然后将其拖放到下面的框中。当光标进入框中时，请观察框的颜色是如何从白色转变为浅灰色的，这就是所谓的放置目标突出显示功能。现在，将颜色样本放入框中。框会变为与样本相同的颜色。

Figure 1DragDropDemo.aspx in Action

获取另一个颜色样本，然后在屏幕上四处移动。注意，样本只能被放置在放置目标上，并且光标会指明此时是否可以放置样本。同时还请注意，当拖动一个颜色样本时，有一个样本的半透明再现会随着光标移动，即“拖动视觉效果”，这样您便知道自己拖动的是什么。稍后您将看到，我们编写代码来创建拖动视觉效果，而 ASP.NET AJAX 则完成其余的所有工作，包括让拖动视觉效果与光标一起移动，以及随着每一次鼠标移动更新光标。

驱动本页面的自定义逻辑在一个名为 ColorDragDrop.js 的脚本文件中，该文件位于网站的 Scripts 文件夹中。ColorDragDrop.js 是由 ScriptManager 加载的自定义脚本文件。事实上，在源代码视图中打开 DragDropDemo.aspx 后即可看到 ScriptManager 加载了三个脚本文件：PreviewScript.js，包含本演示使用的一个关键 ASP.NET AJAX 基类；PreviewDragDrop.js，包含 ColorDragDrop.js 使用的拖放支持；以及 ColorDragDrop.js 本身。