Overlapping jQuery elements
I have 1 draggable div and 2 droppable divs. These 2 droppable divs are also dragging, so there might be a chance that these 2 divs are overlapping. In this situation, when I drag the dragged div and drop down to the overlapping divs, is there anyway to make sure it fell to the top one?
+2
source to share
1 answer
I had a slightly different problem: I had two types of droppables, one type always on top of the other.
To see which droppable the draggable was dropped by, the taller droppable added a class to the draggable when it was dragged. When a drop event is fired on both droppables, the bottom droppable is checked to see if the class being dragged has been added. If so, it ignored the drop event.
top.droppable({
over: function( drop_event, drop_ui ) {
drop_ui.helper.addClass('over_top_element');
},
out: function( drop_event, drop_ui ) {
drop_ui.helper.removeClass('over_top_element');
},
drop: function(drop_event, drop_ui) {
//Handle drop here
}
});
bottom.droppable({
drop: function(drop_event, drop_ui) {
if (!ui.helper.hasClass('over_top_element'))
{
//Handle drop here
}
}
});
+2
source to share