2012-02-19 32 views
2

我已經讓jquery拖放。asp.net c#和jquery拖放

事業部項目拖放到另一個DIV

其是否可以處理用C#回落事件?我想要將丟棄的項目插入到數據庫中。

或者如果我可以從jquery調用c#方法併發送一些字符串數據?

回答

2

首先,您需要決定一個拖放庫,你不能走過去。 JQuery UI。 http://jqueryui.com/demos/droppable/ 也想刪除元素並對它們進行排序,好好看看。 TinySort http://tinysort.sjeiti.com/

管理您的訂單的最佳方式是向可拖動面板添加額外的屬性,例如

然後在可投放插件的停止功能調用一些Ajax相關聯的登錄用戶在DB Web方法

--droppable

$("#TopBodyPanel").droppable({ drop: function (event, ui) { 

$(ui.draggable).detach().css({ top: 0, left: 0 }).appendTo($(this)); 
     $.ajax({ 
     type: 'POST', 
     contentType: 'application/json; charset=utf-8', 
     data: "{ControlId: '"+ui.draggable.attr('id')+"',contentPosition :'" + ui.draggable.data("order-position") + "',ContainerId: '"+$(this).attr('id'))+"',}", 
     dataType: 'json', 
     url: $(location).attr('href') + "/UpdatePanelContent", 
     success: function (result) 
     { //do something 
     }, 
    }); 
}}); 

信息保存爲XML領域。

在頁面加載。 遍歷面板容器。

foreach(....){ 
ControlName.Attributes.Add(dataDefaultIndexAttributeName, pageItem.Index.ToString()); 
} 

然後在HTML

$(function() { 
    $("#sortable-wide-column-id").children("div").tsort({ attr: 'order-position', order: 'asc' }); 
}): 

我知道這是不是一個但是終端到終端的解決方案,這是我實現了幾個位和代碼段在幾個月前的拖拽放置登錄用戶主頁的可排序小部件。

+1

+1好,詳細的解釋 – amelvin 2012-04-15 14:34:26

2

最簡單的答案可能是從將數據插入數據庫的「drop」事件處理程序調用Web服務。

This answer有一個從jquery調用web服務的例子,它傳遞一些基於已知div的數據。