…as what you want to happen is for the draggable handler to be removed from the element when the mouse leaves it. This prevents the accumulation of multiple elements (potentially, lots) that are marked as draggable – performance degrades when too many elements are draggable.

There are other issues involved with this, due to the fact that fast drags can cause the mouse to leave the element halfway through a drag operation. I'm working on a solution to this, as I have an application with lots of drag targets, and having them all draggable at once really affect performance. I'll consider posting my solution as and when I get it working.

In your situation I would probably initialize the droppable targets on drag start. There is a “dragstart” event hook for draggables – anything that may be a drop target could be initialized in there.

Check out – http://jqueryui.com/demos/draggable/#event-start

Works as expected when you mouseover any element, problem is you have to do so before you can drag an element on to it.

If the mouse enters the droppable element for the first time while dragging a draggable element, it doesn’t seem to trigger the event (or maybe if does after you let go of the draggable, but it’s too late at that point). Any ideas?

https://github.com/aglemann/jq…

Here's my attempt: http://jsfiddle.net/uGdm2/

Any ideas what I'm doing wrong?

Thanks for the comment! Removing die from a single DOM element will not result in any change in behavior by jQuery – http://jsbin.com/agohu4/2/edit

Interesting though to say the least! It appears that to unbind you must use the same selector as that used with .live()
Check out these three pieces of jQuery core:
http://james.padolsey.com/jquery/#v=1.4&fn=jQue…
http://james.padolsey.com/jquery/#v=1.4&fn=jQue…
http://james.padolsey.com/jquery/#v=1.4&fn=_liv…

So with .live() a bind is occuring where the selector is actually being added as part of the namespace of the event. Thus on .die() the namespaced event will only match if the same selector is used.

Also here is a more optimized version of the above post:
http://jsbin.com/agohu4/4/edit

Great point – true lazy loading with the loader removed after completion. I didn't think of that. Awesome!

For now we'll consider this the reward people get for reading through the comments . I'll consider how we can add this back in to the core post – perhaps as a final JS Bin at the end of the post.

Just one suggestion, un-bind the mouseenter event once it's served it's purpose…

$(foo).live('mouseenter', function() {
$(this).die('mouseenter').draggable({/* … */});
});

There is a selector created for each widget, so `:ui-datepicker` would work, but this article follows the pattern used internally in jQuery UI.

The difference between `:ui-datepicker` and `:data(datepicker)` is the first will error if the UI DatePicker code is not included on the page, and the second will fail silently like most jQuery selectors that don't have a match. It makes the code slightly less coupled, though arguably either selector could probably be used.

I've seen in the jQuery UI widget sources that a ':' selector is created for each plugin. So it should be possible to do

$this.is(':ui-datepicker')

Haven't tested though.