jquery ui, detect real droppable area on hover off nested droppable

Question

I'm trying to build a nesting droppable place, on drop events I'm appending custom HTML object that it's maybe a droppable(Here's always droppable),
now the question is:

1. How can I call droppable again for new appended element via current option?

2. I want to detect real droppable area on over, Do I have it right or is there a better way?
   (as regards droppable are nested)

here is example: Fiddle

Answer 1

Here is a better example of what I mentioned in the comments:

http://jsfiddle.net/Twisty/pd3pur85/

JavaScript

$(function() {
  function makeDrop(target) {
    target.droppable({
      greedy: true,
      tolerance: 'touch',
      drop: function(event, ui) {
        ui.helper.detach();
        var newDrop = $("<div>", {
          class: "drop"
        }).appendTo($(event.target));
        $('.drop').removeClass('drag-hover');
        makeDrop(newDrop);
      },
      over: function(event, ui) {
        $('.drop').removeClass('drag-hover');
        $(event.target).addClass('drag-hover');
      },
    });
  }

  makeDrop($(".drop"));

  $('.drag').draggable({
    revert: 'true',
    helper: "clone",
  });
});

You can then assign Droppable to your dynamically created <div> during drop.

As far as your over, I suspect this is the best use for this at this time.