Jqeury Drag Drop - how to fetch the dropped value in the server end?

Answer 1

You need to specify a "receive" event handler for when the dragged item is received, such as

$("#selectedUsers").sortable({ 
    connectWith: ["#userList"],
    receive: function(event, ui) {
       objectMoved(ui.sortable, this);
    }
});

function objectMoved(obj, newContainer) {
   /* here you would either perform some sort of AJAX request,
    * or dynamically add/update a form-field for POSTing if you
    * are doing standard form submission
    */
}

You'll also need to attach the same receive event to "userList"

Note that I haven't used the "sortable" ui helper before, but it should be a similar principle to "draggable" and "droppable", and I've based my example on what I know from these other two helpers - if it's not entirely correct, it should be close.

Answer 2

Hi!

It is working perfectly for me... Am using the hidden field in input tag to capture the value of the dropped item. However, i'm not able to actually capture the value of the dragged variable in IE.. It works fine when i do it in Firefox using this peice of code...

        $("#userList").bind('sortreceive', function(event, ui) {
            var itemList = ui.originalTarget.innerHTML;
            alert(itemList);
        });

I also tried doing this...

alert(ui.item.attr('id'));

However, the windows apparently is not able to recognize the id of the li or the inner html present in the li which is being drag-dropped..