jQuery : drag and drop : find the id of the target

Question

I am developing a drag and drop app. I have a DIV that is draggable along the document and there are some other divs in the document, I can drag one div to other divs, but how can I find the id of the div to which I dropped the dragging DIV,

I just want to know the id of the target DIV after placing another DIV over it.

Thanks

Answer 1

You can use an event handler; it gives you both the one dragged and the one dropped on.

function handleDropEvent(event, ui) {
  alert('Dropped ' + ui.draggable.attr('id') + ' onto ' + event.target.id);
}

$('#someContainer').droppable({
  drop: handleDropEvent
})

Answer 2

You should be able to get the ID of the target from this.id from inside the event functions (demo)

$(".droppable").droppable({
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Dropped in " + this.id);
    },
    over: function(event, ui) {
        $('.display').html( this.id );
    }
});

Updated demo to make it clear that this.id works in any of the events.

Answer 3

If you use event delegation, though, this will be some parent of the target div. In this case you could use:

var handleDrop=function(e)
{
    var target=e.target || e.srcElement;
    var id=target.id;
    // do something with it
}