如何在ASP.NET網(wǎng)站中使用HTML 5拖放功能
譯文拖放操作在桌面應(yīng)用程序中司空見(jiàn)慣。現(xiàn)在的Web應(yīng)用程序也試圖利用拖放操作的簡(jiǎn)易性和強(qiáng)大功能，提供改善的用戶(hù)體驗(yàn)。Web開(kāi)發(fā)人員經(jīng)常借助基于JavaScript的庫(kù)或自定義方法，以便在自己的應(yīng)用程序中能夠?qū)崿F(xiàn)拖放操作。幸運(yùn)的是，HTML5本身內(nèi)置了支持拖放的功能。你使用拖放功能，可以拖動(dòng)某個(gè)HTML元素，將它拖放到另一個(gè)HTML元素中。在此過(guò)程中，還可以將數(shù)據(jù)從源元素傳送到目標(biāo)元素。如果把拖放操作與服務(wù)器端處理集成起來(lái)，你就可以提供豐富的用戶(hù)體驗(yàn)。本文介紹了如何在ASP.NET網(wǎng)站中使用HTML5的拖放功能。
為HTML元素啟用拖動(dòng)功能
要使用HTML5的拖放功能，第一步是讓一個(gè)或多個(gè)元素可以拖動(dòng)。為此，你只需要將HTML元素的可拖動(dòng)屬性設(shè)成true。比如說(shuō)，下面這行標(biāo)記代碼將<DIV>元素設(shè)成了可拖動(dòng)元素：
- <div class="myclass" draggable="true">Some content</div>
拖放事件
將一個(gè)或多個(gè)DOM元素標(biāo)為可拖動(dòng)元素只完成了一部分工作。想讓你的拖放操作實(shí)際可以使用，而且對(duì)最終用戶(hù)有視覺(jué)吸引力，就要處理某些事件。下面列出了這些事件：
| 事件 | 描述 |
| dragstart | 拖動(dòng)操作開(kāi)始時(shí)，該事件被觸發(fā)。 |
| drag | 元素拖動(dòng)時(shí)，該事件被觸發(fā)。 |
| dragenter | 可拖動(dòng)元素被拖動(dòng)，并輸入有效的拖放目標(biāo)后，該事件被觸發(fā)。 |
| dragleave | 被拖放到有效拖放目標(biāo)的可拖動(dòng)元素離開(kāi)拖放目標(biāo)后，該事件被觸發(fā)。 |
| dragover | 可拖動(dòng)元素被拖放到有效拖放目標(biāo)上方后，該事件被觸發(fā)。 |
| drop | 已拖動(dòng)元素被拖放到有效拖放目標(biāo)上面后，該事件被觸發(fā)。 |
| dragend | 拖動(dòng)操作結(jié)束后，該事件被觸發(fā)。 |
你可以?xún)煞N方法將事件處理函數(shù)連接到這些事件，即在DOM元素標(biāo)記中，使用onxxxx語(yǔ)法，或者使用JavaScript（或基于JavaScript的庫(kù)，如jQuery）。下列標(biāo)記和代碼顯示了這兩種方法。
- <div class="myclass" draggable="true" ondragstart="OnDragStart" ondrop="OnDrop"></div>
- $("div").each(function () {
- this.addEventListener('dragstart', OnDragStart, false);
- this.addEventListener('drop', OnDrop, false);
- });
要注意上述代碼如何使用jQuery代碼中的addEventListener()方法來(lái)連接事件處理函數(shù)。
拖操作與放操作之間傳送數(shù)據(jù)
大多數(shù)時(shí)候，拖動(dòng)某個(gè)元素，然后把它拖放到另外某個(gè)元素上也需要在源元素與目標(biāo)元素之間傳送一些數(shù)據(jù)。為了完成這項(xiàng)數(shù)據(jù)傳送任務(wù)，HTML5提供了DataTransfer對(duì)象。下列表格列出了DataTransfer對(duì)象的一些重要屬性和方法。
| 屬性/方法 | 描述 |
| effectAllowed | 表明所允許操作的類(lèi)型?？赡艿闹凳牵簄one、copy、copyLink、 copyMove、link、linkMove、move、all和uninitialized。 |
| dropEffect | 表明目前選擇的操作的類(lèi)型。如果操作類(lèi)型得不到effectAllowed 屬性的支持，那么操作就失效。可能的值是：none、copy、link和move。 |
| setDragImage () | 設(shè)置拖動(dòng)操作期間顯示的特定元素。 |
| setData() | 設(shè)置所傳送的特定數(shù)據(jù)。 |
| getData() | 檢索之前設(shè)置的數(shù)據(jù)，以便進(jìn)一步處理。 |
| clearData() | 清除之前存儲(chǔ)的數(shù)據(jù)。 |
你通常會(huì)在dragstart和drop事件處理函數(shù)中使用dataTransfer對(duì)象的屬性和方法。
執(zhí)行拖放操作
現(xiàn)在不妨把你到目前為止獲得的信息放入到一個(gè)簡(jiǎn)單而實(shí)用的應(yīng)用程序中。先建立一個(gè)新的ASP.NET網(wǎng)站。你將創(chuàng)建一個(gè)酷似下圖的簡(jiǎn)單的Web表單：
#p#
簡(jiǎn)單的Web表單
注意：該實(shí)例在最新版的Firefox上經(jīng)過(guò)了測(cè)試，但是應(yīng)該也可以在最新版的其他主要瀏覽器上運(yùn)行。正如你所見(jiàn)，Web表單表示一輛簡(jiǎn)單的購(gòu)物手推車(chē)。各產(chǎn)品由放在DataList控件里面的DIV元素來(lái)表示。這些產(chǎn)品可以拖放到購(gòu)物袋上。一旦所有需要的產(chǎn)品添加完畢，你可以點(diǎn)擊“Place Order”按鈕，即可將產(chǎn)品數(shù)據(jù)發(fā)送到服務(wù)器、下訂單。上面這個(gè)例子使用了如下所示的Entity Framework數(shù)據(jù)模型。你可以從本文所附的代碼下載鏈接（http://developer.com/imagesvr_ce/6920/drag_drop_Code.zip）獲得SQL Server Express數(shù)據(jù)庫(kù)和數(shù)據(jù)模型。
該例子使用了Entity Framework數(shù)據(jù)模型。
上面所示的數(shù)據(jù)模型只包括基本的細(xì)節(jié)。在實(shí)際環(huán)境下的購(gòu)物手推車(chē)系統(tǒng)中，你可以捕捉到多得多的細(xì)節(jié)。產(chǎn)品目錄是一個(gè)DataList控件，它的ItemTemplate包括一個(gè)可拖動(dòng)<DIV>元素。該DIV包裝了某個(gè)產(chǎn)品的所有產(chǎn)品細(xì)節(jié)。
- <asp:DataList ID="DataList1" runat="server" DataSourceID="EntityDataSource1" RepeatDirection="Horizontal">
- <ItemTemplate>
- <div class="product" draggable="true">
- <header><%# Eval("Name") %></header>
- <div><asp:Image runat="server" ID="img1" ImageUrl='<%# Eval("ImageUrl") %>' /></div>
- <div><%# Eval("Description") %></div>
- <br />
- <div><%# Eval("Cost","Cost : ${0}") %></div>
- </div>
- </ItemTemplate>
- </asp:DataList>
- <div class="bag">
- <asp:Image runat="server" ID="img1" ImageUrl="~/images/cart.jpg" />
- <br /><br />
- <input id="Button1" type="button" value="Place Order" />
- <br />
- <input id="Button2" type="button" value="Clear Cart" />
- </div>
請(qǐng)注意表示產(chǎn)品的DIV元素如何被標(biāo)以設(shè)成true的可拖動(dòng)屬性。負(fù)責(zé)處理產(chǎn)品外觀(guān)和感覺(jué)的product CSS類(lèi)如下所示：
- .product
- {
- height: 300px;
- width: 150px;
- float: left;
- border: 2px solid #666666;
- background-color: white;
- padding:3px;
- margin:5px;
- text-align: center;
- cursor: move;
- }
購(gòu)物手推車(chē)還是帶CSS類(lèi)bag的DIV元素。
- .bag
- {
- padding:10px;
- text-align: center;
- cursor: move;
- }
下一步是將拖放事件處理函數(shù)連接到各個(gè)元素。將使用jQuery來(lái)完成這一步，所以確保在<head>部分中引用了jQuery庫(kù)。
- <script src="scripts/jquery-1.4.4.min.js"
- type="text/javascript"></script>
連接各個(gè)事件處理函數(shù)的jQuery代碼會(huì)在ready()事件處理函數(shù)中編寫(xiě)，如下所示：
- $(document).ready(function () {
- $("div .product").each(function () {
- this.addEventListener('dragstart', OnDragStart, false);
- });
- $("div .bag").each(function () {
- this.addEventListener('dragenter', OnDragEnter, false);
- this.addEventListener('dragleave', OnDragLeave, false);
- this.addEventListener('dragover', OnDragOver, false);
- this.addEventListener('drop', OnDrop, false);
- this.addEventListener('dragend', OnDragEnd, false);
- });
- })
正如你所見(jiàn)，第一個(gè)each()調(diào)用為dragstart事件添加了事件偵聽(tīng)函數(shù)。所有的產(chǎn)品DIV元素應(yīng)該會(huì)處理該事件，那樣代碼就會(huì)根據(jù)CSS類(lèi)product來(lái)過(guò)濾元素。同樣，購(gòu)物手推車(chē)元素應(yīng)該會(huì)處理其他事件，尤其是drop事件。
下列標(biāo)記代碼顯示了完整的事件處理函數(shù)：OnDragStart、OnDragEnter、OnDragLeave、OnDragOver、OnDrop和OnDragEnd。
- function OnDragStart(e) {
- this.style.opacity = '0.3';
- srcElement = this;
- e.dataTransfer.effectAllowed = 'move';
- e.dataTransfer.setData('text/html', $(this).find("header")[0].innerHTML);
- }
- function OnDragOver(e) {
- if (e.preventDefault) {
- e.preventDefault();
- }
- $(this).addClass('highlight');
- e.dataTransfer.dropEffect = 'move';
- return false;
- }
- function OnDragEnter(e) {
- $(this).addClass('highlight');
- }
- function OnDragLeave(e) {
- $(this).removeClass('highlight');
- }
- function OnDrop(e) {
- if (e.stopPropagation) {
- e.stopPropagation();
- }
- srcElement.style.opacity = '1';
- $(this).removeClass('highlight');
- var count = $(this).find("div[data-product-name='" + e.dataTransfer.getData('text/html') + "']").length;
- if (count <= 0) {
- $(this).append("<div class='selectedproduct' data-product-name='" + e.dataTransfer.getData('text/html') + "'>" + e.dataTransfer.getData('text/html') + "</div>");
- }
- else {
- alert("This product is already added to your cart!");
- }
- return false;
- }
- function OnDragEnd(e) {
- $("div .bag").removeClass('highlight');
- this.style.opacity = '1';
- }
讓我們逐個(gè)詳細(xì)介紹上面顯示的每個(gè)事件處理函數(shù)。
OnDragStart
- function OnDragStart(e) {
- this.style.opacity = '0.3';
- srcElement = this;
- e.dataTransfer.effectAllowed = 'move';
- e.dataTransfer.setData('text/html', $(this).find("header")[0].innerHTML);
- }
dragstart事件處理函數(shù)減少了被拖動(dòng)元素的不透明度，那樣最終用戶(hù)就能獲得關(guān)于拖動(dòng)操作的視覺(jué)線(xiàn)索。拖動(dòng)操作的來(lái)源存儲(chǔ)在全局變量srcElement中，因?yàn)槲覀円院笤赿rop事件處理函數(shù)中需要它。dataTransfer對(duì)象的effectAllowed屬性被設(shè)成了move。此外，setData()方法將數(shù)據(jù)設(shè)成了傳送到dataTransfer對(duì)象中header元素（即產(chǎn)品名稱(chēng)）的innerHTML。這樣一來(lái)，drop事件處理函數(shù)就知道哪個(gè)產(chǎn)品添加到購(gòu)物手推車(chē)中。setData()方法的第一個(gè)參數(shù)表明了所傳送數(shù)據(jù)的類(lèi)型（這里是“text/html”）。
OnDragOver
- function OnDragOver(e) {
- ...
- $(this).addClass('highlight');
- e.dataTransfer.dropEffect = 'move';
- return false;
- }
dragover事件處理函數(shù)將CSS類(lèi)添加到拖放目標(biāo)，以便為最終用戶(hù)提供關(guān)于這一操作的視覺(jué)線(xiàn)索。higlight CSS類(lèi)如下所示：
- .highlight
- {
- background-color:Yellow;
- }
OnDragOver函數(shù)也將dataTransfer對(duì)象的dropEffect設(shè)成move。
OnDragEnter和OnDragLeave
- function OnDragEnter(e) {
- $(this).addClass('highlight');
- }
- function OnDragLeave(e) {
- $(this).removeClass('highlight');
- }
dragenter和dragleave事件處理函數(shù)很簡(jiǎn)單，只是將highlight CSS類(lèi)添加到目標(biāo)元素，或者從目標(biāo)元素中清除這個(gè)類(lèi)。
OnDrop
- function OnDrop(e) {
- ...
- srcElement.style.opacity = '1';
- $(this).removeClass('highlight');
- var count = $(this).find("div[data-product-name='" +
- e.dataTransfer.getData('text/html') + "']").length;
- if (count <= 0) {
- $(this).append("<div class='selectedproduct' data-product-name='" +
- e.dataTransfer.getData('text/html') + "'>" +
- e.dataTransfer.getData('text/html') + "</div>");
- }
- else {
- alert("This product is already added to your cart!");
- }
- return false;
- }
drop事件處理函數(shù)將源元素的不透明度設(shè)回成了1，因?yàn)橥戏挪僮饕淹瓿伞Ｋ€清除了目標(biāo)元素中的highlight CSS類(lèi)。然后，它將被拖動(dòng)的產(chǎn)品添加到目標(biāo)元素后面。注意使用getData()方法，檢索之前在dragstart事件處理函數(shù)中設(shè)置的數(shù)據(jù)。還要進(jìn)行檢查，確保同一產(chǎn)品不能添加多次。
OnDragEnd
- function OnDragEnd(e) {
- $("div .bag").removeClass('highlight');
- this.style.opacity = '1';
- }
dragend事件處理函數(shù)只是清除拖放目標(biāo)中的highlight CSS類(lèi)。
#p#
將數(shù)據(jù)從客戶(hù)端傳送到服務(wù)器
要將購(gòu)物手推車(chē)中的產(chǎn)品實(shí)際傳送到服務(wù)器端代碼，你就要使用jQuery的$.ajax()方法。“Place Order”的click事件處理函數(shù)擁有相關(guān)編碼，如下所示：
- $("#Button1").click(function () {
- var data = new Array();
- $("div .bag div").each(function (index) {
- data[index] = "'" + this.innerHTML + "'";
- });
- $.ajax({
- type: 'POST',
- url: 'shoppingcart.aspx/PlaceOrder',
- contentType: "application/json; charset=utf-8",
- data: '{ products:[' + data.join() + ']}',
- dataType: 'json',
- success: function (results) { alert(results.d); },
- error: function () { alert('error'); }
- });
- });
正如你所見(jiàn)，$.ajax()調(diào)用駐留在ShoppingCart.aspx Web表單里面的Web方法PlaceOrder。PlaceOrder Web方法如下所示。
[WebMethod]
- public static string PlaceOrder(string[] products)
- {
- Guid orderId = Guid.NewGuid();
- DatabaseEntities db = new DatabaseEntities();
- foreach (string p in products)
- {
- Order order = new Order();
- order.OrderId = orderId;
- order.ProductName = p;
- order.Qty = 1;
- db.Orders.AddObject(order);
- }
- db.SaveChanges();
- return "Order with " + products.Length.ToString() + " products has been added!";
- }
PlaceOrder Web方法只是把訂單細(xì)節(jié)放入到Orders表格中。PlaceOrder() Web方法接受一組表示產(chǎn)品名稱(chēng)的字符串。要注意$.ajax()如何傳送采用JSON格式的產(chǎn)品參數(shù)。Web方法一旦成功完成，success處理函數(shù)就會(huì)向最終用戶(hù)顯示提醒信息?，F(xiàn)在運(yùn)行Web表單，將一個(gè)或多個(gè)產(chǎn)品拖放到購(gòu)物手推車(chē)上，然后點(diǎn)擊“Place Order”按鈕，就可以將產(chǎn)品名稱(chēng)從購(gòu)物手推車(chē)傳送到服務(wù)器。
結(jié)束語(yǔ)
HTML5提供了能夠在網(wǎng)頁(yè)中實(shí)現(xiàn)拖放功能的一種原生方式。使用這些功能，你就可以改善最終用戶(hù)體驗(yàn)，讓你的網(wǎng)站更具交互性、更容易使用。DOM元素的可拖動(dòng)屬性管理著某個(gè)元素可不可以拖動(dòng)。dragstart、dragenter、dragleave、 dragover、drop和dragend這些事件讓你可以控制整個(gè)拖放操作。dataTransfer對(duì)象讓你可以在拖動(dòng)來(lái)源和拖放目標(biāo)之間傳送數(shù)據(jù)。dataTransfer對(duì)象的setData()和getData()方法其任務(wù)分別是設(shè)置所傳送的數(shù)據(jù)和檢索已傳送的數(shù)據(jù)。
原文：http://www.developer.com/lang/using-html5-drag-and-drop-in-asp.net.html
【編輯推薦】
