jQuery UI Droppable : how to make it live?

In this question, draggables are created on the fly, when the mouse enters the element to drag.

I'd like to do the same kind of thing, but with droppables : decides whether to make the element droppable only when the dragged element arrives over it. I'm sure it's possible but after a bit of research, I couldn't make it.

I tried things like this, but failed:

jQuery.fn.liveDroppable = function (opts) {
    this.live("mouseover", function() {
        if (!$(this).data("livedropinit")) {
            $(this).data("livedropinit", true).droppable(opts);
            $(this).trigger('dropover开发者_C百科');
        }
    });
};

I got this to work by binding it to JQuery using the methods described on this post for draggable. The only problem is that it seems to have an issue on nested droppables which I am currently investigating. Here's the modified version. I had to change it to "mouseenter".

(function ($) {
       $.fn.liveDroppable = function (opts) {
          this.live("mouseenter", function() {
             if (!$(this).data("init")) {
                $(this).data("init", true).droppable(opts);
             }
          });
       };
}(jQuery));

Now instead of calling it like:

$(selector).droppable({opts});

...just use:

$(selector).liveDroppable({opts})

Would this work for you? It's the .hover(); function. Not sure if you've tried it yet. http://api.jquery.com/hover/