Draggable div onto droppable div inside another div

Question

I have two divs, side by side. The div on the left contains the names of applicants for a fellowship. The div on the right contains the filenames of letters of recommendation for the applicants. I would like to be able to drag the filenames over to the left div and drop them on the name of the appropriate applicant. However, the filenames won't let themselves be dragged outside of their div. Any help? Do I need to add the parent div name to the droppable element?

$(".drop_applicant").droppable();

Fiddle here: https://jsfiddle.net/150f6yrh/5/

Answer 1

Updated JSFiddle

$(".drag_letter").draggable({
   cursor: 'move',
   revert: true,
   helper: 'clone'   
});


$(".drop_applicant").droppable({
    accept: '.drag_letter',
 drop: function(event, ui){
            alert(ui.draggable.prop("id") + " dropped onto " + $(this).prop("id"));
        }

 });

https://jsfiddle.net/150f6yrh/8/

I personally like with the revert: true option removed on the draggable, but it is up to you :)

Hope it helps!