how can you check which element your draggable item is hovering over? (JQuery)

Question

I have two lists. The first is comprised of draggable items (like this). It is connected to the second, which is a sortable list (like this).

Items from the first list can be added to the second list by dragging them there. They are then cloned, and green so the user can see they're unsaved additions.

What I want to happen is when you drag an item out of the second list, it will be marked for deletion, or sent back to the first list (if it's an unsaved addition). However I also want people to be able to sort the second list.

So if they drag an item out and release the mouse, it's supposed to be removed. If they drag an item out and back in again, it's not supposed to be removed.

I've tried wrapping a mouseup handler inside of a sortout, with that I end up with it working, but then you can't sort items in the list.

Any ideas of where I should take this?

Answer 1

Using a different method, it seems this is messier than I thought it would be. I didn't test in IE yet, which would likely open up a new can of worms, so I'll let the dragging only be sorting and add a delete button. Cheers,

nu

Answer 2

You need to bind to the drop event on the target list (ID "droplist"), like so:

$("#droplist").bind( "drop", function(event){
    $(this).append( event.dragTarget ); // or use prepend to put it at the top
    console.log("Dropped " + event.dragTarget.title);
    // trigger another event to do the work around checking if it is an unsaved addition
})

To remove an item on drag out you might try binding to a container element around the lists.

$("#background").bind( "drop", function(event){
    event.dragTarget.remove(); // guessing here
})

A code snippet would be handy to help any further.