拖放操作在桌面应用程序中司空见惯。现在的Web应用程序也试图利用拖放操作的简易性和强大功能，提供改善的用户体验。Web开发人员经常借助基于JavaScript的库或自定义方法，以便在自己的应用程序中能够实现拖放操作。幸运的是，HTML5本身内置了支持拖放的功能。你使用拖放功能，可以拖动某个HTML元素，将它拖放到另一个HTML元素中。在此过程中，还可以将数据从源元素传送到目标元素。如果把拖放操作与服务器端处理集成起来，你就可以提供丰富的用户体验。本文介绍了如何在ASP.NET网站中使用HTML5的拖放功能。

为HTML元素启用拖动功能

要使用HTML5的拖放功能，第一步是让一个或多个元素可以拖动。为此，你只需要将HTML元素的可拖动属性设成true。比如说，下面这行标记代码将



Some content



拖放事件

将一个或多个DOM元素标为可拖动元素只完成了一部分工作。想让你的拖放操作实际可以使用，而且对最终用户有视觉吸引力，就要处理某些事件。下面列出了这些事件：

事件

描述

dragstart

拖动操作开始时，该事件被触发。

drag

元素拖动时，该事件被触发。

dragenter

可拖动元素被拖动，并输入有效的拖放目标后，该事件被触发。

dragleave

被拖放到有效拖放目标的可拖动元素离开拖放目标后，该事件被触发。

dragover

可拖动元素被拖放到有效拖放目标上方后，该事件被触发。

drop

已拖动元素被拖放到有效拖放目标上面后，该事件被触发。

dragend

拖动操作结束后，该事件被触发。

你可以两种方法将事件处理函数连接到这些事件，即在DOM元素标记中，使用onxxxx语法，或者使用JavaScript(或基于JavaScript的库，如jQuery)。下列标记和代码显示了这两种方法。