This code is fully working as expected, although firebug says there’s an issue, which I don’t understand, (this.helper=NULL). The important thing is that it works, but since I’m not an expert with javascript, I’m hoping for some advice. This is a pretty standard implementation of jQuery UI’s sortable / draggable / droppable:
$(document).ready(function(){
$(function(){
// make the list of images sortable
$("#image-ul").sortable({
// allow dragging into the trash can
connectWith: '#trash_can',
item: 'li',
// revert causes bugginess in IE, so left out even though cool
//revert: 200,
opacity: 0.6,
cursor: 'move',
// apply this css class to available places to drop within list
placeholder: 'placeholder-border',
// drop available once mouse has touched droppable area
tolerance: 'pointer',
update: function(){
var order = $(this).sortable("serialize");
$.post("/drag_drop/update", order, function(theResponse){
// show the confirmation and fade it away after 2.5 seconds
$('#content').css('display', 'block');
$('#content').html(theResponse).delay(2500).fadeOut('slow');
});
}
});
// allow for deleting images by sending them to the trash can
$("#trash_can").droppable({
accept: '#image-ul > li',
// when the trash can is hovered on by a draggable, set the css class
hoverClass: 'delete-border',
drop: function(event, ui) {
// setTimeout takes care of IE bug where deleted item remains
setTimeout(function() { ui.draggable.remove(); }, 1);
deleteImage(ui.draggable);
}
});
// what to do when an image is dropped into the trash can
function deleteImage($draggable){
// strip out "image_data_" so that only the actual image ID is sent to delete query
var id = $draggable.attr('id');
id = id.replace('image_data_','');
params = {
'id': id,
'path': $draggable.find("img").attr("src")
}
$.ajax({
url: '/drag_drop/delete',
type: 'POST',
data: params,
success: function( delete_response ){
$('#content').css('display', 'block');
$('#content').html( delete_response ).delay(2500).fadeOut('slow');
}
});
$("#image-ul").sortable('cancel');
}
});
});
I’m sorry, but I don’t have this on a website that you can check out. I could put it on one, but since it deals with file uploads, I’d prefer not to.