Drag and drop in jquery

Question

I didn't get the id of dropped div on dropping on another div i get the id_droppable i but didn't get the id_dropped div The alert id_dropped give undefined as result

Please help me verify my code and correct my error.

$(".full-circle").droppable({
    accept: ".unseated_guest",
    drop: function(event, ui) {
        var id_droppable = this.id;
        alert(id_droppable);
        var id_dropped = ui.id;
        alert(id_dropped);
        var name=document.getElementById("div_name_0").value;
        $(this).css("background-color","red");
        $(this).append(ui.draggable);
        //$(this).draggable('disable');
        }

    });

Answer 1

The ui parameter does not have an id attribute, as it is a reference to the element being drug. You need to get the id like ui.draggable.attr('id'), or whatever method you prefer to get the id of an element.

$(".full-circle").droppable({
    accept: ".unseated_guest",
    drop: function(event, ui) {
        //Stuff above
        var id_dropped = ui.draggable.attr('id');
        alert(id_dropped);
        //Stuff below
        }

    });

Answer 2

Inside the drop handler, $(this) is the droppable, ui.draggable is the draggable (as a jQuery object). So for the droppable:

$(this).attr('id');
// or
this.id;

And for the draggable:

ui.draggable.attr('id');
// or, for the sake of symmetry:
ui.draggable[0].id;