Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.
$(function() {
$( "ul.tasklist" ).sortable({
revert: true,
stop: function(event, ui) {
document.getElementById("page").style.opacity = ".15";
document.getElementById("page").style.filter = "alpha(opacity=15)";
document.getElementById("loading").style.display = "block";
var ul_div_name = "#" + $(this).attr('ID');
var num_list_items = $(ul_div_name).children().length;
var stage_ul_id = $(this).attr('ID');
var stage_id = stage_ul_id.substring(stage_ul_id.indexOf('_')+6);
var list_of_task_ids = new Array();
var num = 0;
$(ul_div_name + ' li').each(function() {
var id = $(this).attr('id').split('_')[1];
list_of_task_ids[num] = id;
num++;
});
$.ajax({
type : 'POST',
url : '../user/packages.php?action=reorderTasks',
dataType : 'json',
data: {
stage_id : stage_id,
num_list_items : num_list_items,
list_of_task_ids : list_of_task_ids,
},
success: function(data) {
document.getElementById("page").style.opacity = "1";
document.getElementById("page").style.filter = "alpha(opacity=100)";
document.getElementById("loading").style.display = "none";
alert(data.msg);
$('#package_edit').before('<div class="successtext"><input name="dismiss" type="button" class="deletebutton floatright" value="X" onclick="dismissWindow()" /><p><strong>The Tasks have been reordered successfully</strong></p></div>');
$(".successtext").delay(1000).fadeOut(2000);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert('ERROR!');
}
});
}
});
});
Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.
Have a better answer? Share it in a comment.
http://jqueryui.com/demos/draggable/#sortable
After the ordering, you can handle the changes and trigger the AJax call within these events:
http://jqueryui.com/demos/draggable/#events