How to make the draggable the child of the element it's dropped into?

Question

I'm having a tough time making the .num that is dragged appendTo the .container it's dropped into.

I've tried several things. The closest I got was having all the .nums become the child of the same container, although only the one I was dragging should of appended.

I set up a very nice, simple fiddle here. http://jsfiddle.net/6UvvQ/2/ After you drag the red boxes into one of the blue containers, click on the "test" button, and it should say ImYourFather1 or ImYourFather2 for the boxes. If it says ImNotYourFather, it didn't work.

HTML

<div class="wrapper">
<ol class="ImNotYourFather">
    <li class="num" value="4">4</li>
    <li class="num" value="15">15</li>
    <li class="num" value="11">11</li>
    <li class="num" value="7">7</li>
</ol>
</div>
<div class="ImYourFather1 container leftcontainer"></div>
<div class="ImYourFather2 container rightcontainer"></div>
<button class="test">Test</button>
<div class="logs"></div>

js/jQuery/jQueryUI

$('.num').draggable({
        containment: '.wrapper',
        appendable: '.container',
        drag: function(event, ui) {}
    });
    $('.container').droppable({
        accept: '.num',
        greedy: true,
        drop: function(event, ui) {}
    });
    $( ".num" ).on( "drag", function(event, ui) {
         var abcde = $(this);
         } );

    $( ".container" ).on( "drop", function(event, ui) {
         abcde.appendTo(this);
    } );

$('.test').on('click', function() {
    $('.logs').show();
    for (var x = 0; x < 4; x += 1) {
      var whoseMyDaddy = $('.num').parent().attr('class');
       $('<p>'+whoseMyDaddy+'</p>').appendTo('.logs');
    }
});

Answer 1

This should make the .container the parent of the draggable:

$('.container').on('drop', function(event, ui) {
     $(this).append(ui.draggable);
});

Note: You don't need the "drag" handler then.

Also, your handler for the .test button isn't showing you what you want, but this will:

$('.test').on('click', function() {
    $('.logs').show();
    $('.num').each(function() {
        var whoseMyDaddy = $(this).parent().attr('class');
        $('<p>'+whoseMyDaddy+'</p>').appendTo('.logs');
    });
});

The problem is that your code loops four times, but always gets the class of the first .num element's parent.

And one last thing: It's probably not good to have the containers be <div> elements when the draggables are <li> elements.