I have made jquery drag and drop.
Div items dropping into another div
Does its possible to handle dropped event with c#? I want to insert dropped items into database.
Or if i can call c# method from jquery and send some string data?
Add a comment
|
2 Answers
First you'll need to decide on a drag and drop library, you can't go past. JQuery UI. http://jqueryui.com/demos/droppable/ Also do want to drop elements and sort them, well take a look at. TinySort http://tinysort.sjeiti.com/
best way to manage your order is by add extra attributes to your draggable panel e.g.
Then on Stop function of the droppable plugin call some ajax to a web method
--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
},
});
}});
Save information into xml field in DB associated to the logon user.
On Page load. Iterate through panel containers.
foreach(....){
ControlName.Attributes.Add(dataDefaultIndexAttributeName, pageItem.Index.ToString());
}
then in HTML
$(function() {
$("#sortable-wide-column-id").children("div").tsort({ attr: 'order-position', order: 'asc' });
}):
I realise this isn't a end-to-end solution however this is a few bit and pieces of code I implement a few months ago for a drag-drop, sortable widgets for a logon user homepage.
Comments
The simplest answer would probably be to call a web service from the 'drop' event handler that inserted the data into the database.
This answer has an example of calling a web service from jquery passing it some data based on a known div.
