Drag & Drop

 

Note:
  1. #gallery can't be "overflow:hidden";
 
 
$gallery.find('li').draggable({
revert: true,
containment: "document",
appendTo: "body",
cursor: "move"
});
  
$leftArea.droppable({
accept: "#gallery li",
activeClass: "ui-state-highlight",
drop: function( event, ui ) {
left_handler( ui.draggable );
}
});
 
function left_handler( $item ) {
var $left = $('#leftArea');
var $list = $left.find('ul:first');
 
$item.fadeOut(function() {
$item.appendTo( $list ).fadeIn(function() {
$item
.animate({ width: "91px" })
.find( "img" )
.animate({ height: "40px" });
});
});
}