I've got a fairly complex web app that allows a user to edit a series of 'pages' (they're just DIVs) on a single web page.  There's a scrolling list of fields that can be dropped onto this page within the text.

So far so good.

It occurred to me that it'd be appropriate then if I could drag the items off the pages to delete them.

Okay, thinks I, I'll just make the item draggable if the mouse is hovering over it:

Looks good, and I can drag the clone of the item around on a page.  

The problem comes when the user drops it.  How can I tell where it's dropped?

I thought of a couple ways to see what's going on:

1) make $('body').droppable(), and rely on event bubbling.  (It's not clear to me what the dropped object is over.)  I tried this and couldn't get it to work (it always would report the helper as the event.target object.)

2) make $('*').droppable()...ye gads but that sounds heavyweight to me.  Please tell me that this is not the correct solution.  If it is, then I'm stuffed, as there are various other droppable calls out in my application that this would break.

3) use the stop method of draggable, and figure out what item is underneath my helper.  If it's the original obj, then keep it.  If it's another object, then delete it.  I've tried this extensively, as it makes the most sense to me, but the only object that ever is found in the event handlers is the helper or the source object.  I need to know what it's over.

Have I missed something obvious here?  anyone have a working example they could show me?

Thanks!

-Ken