Question

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?

Answer 1

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.