$('#drag .drg').draggable({
cursor: 'move', // sets the cursor apperance
revert: 'invalid', // makes the item to return if it isn't placed into droppable
revertDuration: 900, // duration while the item returns to its place
opacity: 0.35 // opacity while the element is dragged
});
// define options for droppable
$('#drop').droppable({
accept: 'img.drg', // accept only images with class 'drg'
activeClass: 'drp', // add class "drp" while an accepted item is dragged
drop: function(event, ui) {
// after the draggable is droped, hides it with a hide() effect
ui.draggable.hide(1000);
}
});
// when the "#sw" element (inside the "#drop") is clicked
// show the items with class "drg", contained in "#drag"
$('#drop #sw').click(function(){
$('#drag .drg').slideDown(1000);
});
});