In a nested droppables all elements will receive the draggable element. If we set the greedy to true then parent element ( droppables ) can't receive the draggable element.
By using event.target.id we will display the id of the droppable elements which are received the draggable element.
$( "#droppable" ).droppable({
greedy: true
});
To read value
var status = $( ".droppable" ).droppable( "option", "greedy" );
Deciding How draggable will hover over the droppable
"fit": Draggable overlaps the droppable ( 100 % ) entirely.
"intersect": Draggable overlaps the droppable at least 50% in both directions.
"pointer": Mouse pointer overlaps the droppable.
"touch": Draggable overlaps the droppable any amount.
var my_widget = $( "#droppable" ).droppable( "widget" );
activate
This event is triggered when the accepted draggable started moving ( dragged ). This event is not trigged when the draggable element is on move.
activate: function( event, ui ) { }
To understand the event we will try both activate and deactivate ( triggered when draggable stopped moving ) together.
create
This event is triggered when the droppable element is created.
create: function( event, ui ) { }
To understand the event we will use one button click function to create a droppable element.
deactivate
This event is triggered when the accepted draggable stops moving ( dragged ). This event is not trigged when the draggable element is on move.
deactivate: function( event, ui ) { }
To understand the event we will try both activate and deactivate ( triggered when draggable stopped moving ) together.
Try to display the coordinate of draggable element at staring or stopping of movement.
Hint : add this line inside the event function
var d_position = $('#draggable').position();
drop
This event is triggered when the accepted draggable is dropped over the droppable element.
The overlapping area based on which drop event is trigged depends on tolerance option of droppable element.
drop: function( event, ui ) { }
To understand drop event we will try both activate and DROP event.
drop
This event is triggered when draggable element is dropped over droppable element.
drop: function( event, ui ) { }
out
This event is triggered when draggable element moves out of droppable element.
out: function( event, ui ) { }
over
This event is triggered when draggable element moves over droppable element.