在WebForm上進行拖拽

1、使用access資料庫

2、使用SQL對DB進行Insert, update, delete 和read

3、使用javascript在一個web頁面拖拽textbox

4、在頁面和資料庫中對textbox進行add, move和delete 

    首先我們必須建立處理事件的javascript代碼，這些事件是drag, mouse down 和 mouse up。我在網上找到了滑鼠的拖拽事件處理的代碼:

代碼

     函數在螢幕上通過計算x和y的值來拖動對象。在網上還有很多其它類似的代碼，但是我發現這種方式是非常容易使用的。下一個是mouse down腳本，WhitchElement在這裡被調用，我在網上找到它，但是我修改它來滿足自己的需要。

     這段腳本能偵查哪個控件被點選，傳遞給我們這個控件的ID。我們要做的是将這個ID傳給命名為id的textbox控件，每次控件被點選我們就添加一個新的ID，每個ID之間的用空格分開。

     最後完成mouse up腳本，我承認我不擅長javascript，但是我還是能了解drag 腳本的。

       當控件拖動到合适的位置,放開滑鼠,此腳本檢測控件的x 和 y 坐标的值。這時我們傳遞x 和 y 值到一個名字為xpos的textbox和ypos的textbox。每次控件被點選的時候，我們添加新的x和y的位置給textbox，在x和y值之間留一個空格。

    上面是javascript腳本的部分。其餘部分是在資料庫中存儲控件的位置。在每次回發之間檢索控件的位置，讓使用者不能看見回發，我必須使用ajax。最重要的是Page_LoadComplete處理。

     我們在這裡做的是，網站每次回發的時候，我們讀取資料庫。在運作時建立控件。在資料庫中，控件的ID對應資料庫的id字段。控件的Text對應資料庫的Name字段，然後我們設定屬性的樣式。最重要的樣式屬性是position: absolute，添加我們拖動拖動屬性，onmousedown 和 onmouseup。将textbox添加到頁面的位置和資料庫中存儲的位置一緻。

    剩餘的代碼是常見的SQL的read, insert, update 和delete操作。我們使用JavaScript 傳遞id, x 和 y的值給textbox。分割textbox的文本，使用SQL的update 和delete指令将他們更新到到資料庫中。

    這個程式目前隻能在IE中運作，不能在FireFox運作，我也沒有在其它浏覽器中測試過。有興趣朋友可以一起完善它。

本文轉自麒麟部落格園部落格，原文連結：http://www.cnblogs.com/zhuqil/archive/2010/01/13/1646413.html，如需轉載請自行聯系原作者