2012-02-19 31 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的数据。