jQuery UI Droppable - Visual feedback
#draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
$(function() {
$("#draggable").draggable();
$("#droppable").droppable({
hoverClass: 'ui-state-active',
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
$("#draggable2").draggable();
$("#droppable2").droppable({
accept: "#draggable2",
activeClass: 'ui-state-hover',
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});
});
Feedback on hover:
Drag me to my target
Drop here
Drag me to my target
Drop here
Change the droppable's appearance on hover, or when the droppable is active (an acceptable draggable is dropped on it). Use the hoverClass or activeClass options to specify respective classes.