如何在ASP.NET网站中使用HTML 5拖放功能(1怎样启用javascri

　　拖放操作在桌面应用程序中司空见惯。现在的Web应用程序也试图利用拖放操作的简易性和强大功能，提供改善的用户体验。Web开发人员经常借助基于JavaScript的库或自定义方法，以便在自己的应用程序中能够实现拖放操作。幸运的是，HTML5本身内置了支持拖放的功能。你使用拖放功能，可以拖动某个HTML元素，将它拖放到另一个HTML元素中。

　　AD：

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

　　为HTML元素启用拖能

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

　　事件描述dragstart拖动操作开始时，该事件被触发。drag元素拖动时，该事件被触发。dragenter可拖动元素被拖动，并输入有效的拖放目标后，该事件被触发。dragleave被拖放到有效拖放目标的可拖动元素离开拖放目标后，该事件被触发。dragover可拖动元素被拖放到有效拖放目标上方后，该事件被触发。drop已拖动元素被拖放到有效拖放目标后，该事件被触发。dragend拖动操作结束后，该事件被触发。

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

　　要注意上述代码如何使用jQuery代码中的addEventListener()方法来连接事件处理函数。

　　拖操作与放操作之间传送数据

　　大多数时候，拖动某个元素，然后把它拖放到另外某个元素上也需要在源元素与目标元素之间传送一些数据。为了完成这项数据传送任务，HTML5提供了DataTransfer对象。下列表格列出了DataTransfer对象的一些重要属性和方法。

　　你通常会在dragstart和drop事件处理函数中使用dataTransfer对象的属性和方法。

　　执行拖放操作

　　现在不妨把你到目前为止获得的信息放入到一个简单而实用的应用程序中。先建立一个新的ASP.NET网站。你将创建一个酷似下图的简单的Web表单：

　　src=http://developer.51cto.com/art/20如何在ASP.NET网站中使用HTML 5拖放功能(1怎样启用javascri1203/

转载于:https://www.cnblogs.com/wangseng/archive/2012/04/27/2474247.html