Drag & Drop Jquery UI how to hide Div after drop?

Question

I’m trying to do the following operation, I have 3 Divs a Droppable and 2 Draggable, I want when I drag one of the draggables and drop on top of the droppable the Draggable is hidden by stopping being displayed on the screen.

<div id="" class="droppable">Droppable</div>
<div id="" class="draggable">Draggable 1</div>
<div id="" class="draggable">Draggable 2</div>

In case at the time I drop the draggable class div on top of the droppable he would have to distinguish between the Draggable 1 or the Draggable 2 and hide the correct.

if anyone knows or has any idea how to do this and can post the code would be great.

Answer 1

The drop has an event dropthat triggers a jQuery function, this function has two parameters, one of them the object ui that contains the element that was "dropped". So inside this function you only need to hide the element (.hide() in my example) or remove it.

drop: function (event, ui) {
    ui.draggable.hide()
}

Example.
Documentation.