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

Navigation
1

I'm trying to do the following operation, I have 3 divs a Droppable and 2 Draggable, I want that when I drag one of the draggables and drop on top of the droppable Draggable is hidden from 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 over the droppable it would have to distinguish between Draggable 1 or Draggable 2 and hide the correct one.

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

    
asked by anonymous 24.05.2014 / 13:31

1 answer

2

The drop has a drop event that triggers a jQuery function, this function has two parameters, one of which is the ui object that contains the element that has been dropped. So within that function you just have to hide the element ( .hide() in my example) or remove it. 

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

Example .
Documentation .

    
24.05.2014 / 14:04
JBoss log reading Gallery Photos