如何在ASP.NET网站中使用HTML 5拖放功能(1)
拖放操作在桌面应用程序中司空见惯。现在的Web应用程序也试图利用拖放操作的简易性和强大功能，提供改善的用户体验。Web开发人员经常借助基于JavaScript的库或自定义方法，以便在自己的应用程序中能够实现拖放操作。幸运的是，HTML5本身内置了支持拖放的功能。你使用拖放功能，可以拖动某个HTML元素，将它拖放到另一个HTML元素中。在此过程中，还可以将数据从源元素传送到目标元素。如果把拖放操作与服务器端处理集成起来，你就可以提供丰富的用户体验。本文介绍了如何在ASP.NET网站中使用HTML5的拖放功能。
为HTML元素启用拖动功能
要使用HTML5的拖放功能，第一步是让一个或多个元素可以拖动。为此，你只需要将HTML元素的可拖动属性设成true。比如说，下面这行标记代码将<DIV>元素设成了可拖动元素：
拖放事件
将一个或多个DOM元素标为可拖动元素只完成了一部分工作。想让你的拖放操作实际可以使用，而且对最终用户有视觉吸引力，就要处理某些事件。下面列出了这些事件：
事件
描述
dragstart
拖动操作开始时，该事件被触发。
drag
元素拖动时，该事件被触发。
dragenter
可拖动元素被拖动，并输入有效的拖放目标后，该事件被触发。
dragleave
被拖放到有效拖放目标的可拖动元素离开拖放目标后，该事件被触发。
dragover
可拖动元素被拖放到有效拖放目标上方后，该事件被触发。
drop
已拖动元素被拖放到有效拖放目标上面后，该事件被触发。
dragend
拖动操作结束后，该事件被触发。
你可以两种方法将事件处理函数连接到这些事件，即在DOM元素标记中，使用onxxxx语法，或者使用JavaScript（或基于JavaScript的库，如jQuery）。下列标记和代码显示了这两种方法。
要注意上述代码如何使用jQuery代码中的addEventListener()方法来连接事件处理函数。
拖操作与放操作之间传送数据
大多数时候，拖动某个元素，然后把它拖放到另外某个元素上也需要在源元素与目标元素之间传送一些数据。为了完成这项数据传送任务，HTML5提供了DataTransfer对象。下列表格列出了DataTransfer对象的一些重要属性和方法。
属性/方法
描述
effectAllowed
表明所允许操作的类型。可能的值是：none、copy、copyLink、
copyMove、link、linkMove、move、all和uninitialized。
dropEffect
表明目前选择的操作的类型。如果操作类型得不到effectAllowed
属性的支持，那么操作就失效。可能的值是：none、copy、link和move。
setDragImage ()
设置拖动操作期间显示的特定元素。
setData()
设置所传送的特定数据。
getData()
检索之前设置的数据，以便进一步处理。
clearData()
清除之前存储的数据。
你通常会在dragstart和drop事件处理函数中使用dataTransfer对象的属性和方法。
执行拖放操作
现在不妨把你到目前为止获得的信息放入到一个简单而实用的应用程序中。先建立一个新的ASP.NET网站。你将创建一个酷似下图的简单的Web表单：
1
内容导航
第 1 页：为HTML元素启用拖动功能 第 2 页：简单的Web表单 第 3 页：将数据从客户端传送到服务器
