Question

what is the problem with the following code?

see here: http://jsfiddle.net/xKcAu/

JS:

$(document).ready( function() {

    $('#diag1').draggable();
    $('#diag1').css('background-color', '#f4f');
    $('#diag1').width('100px');
    $('#diag1').height('50px');

    $('#cnt1').css('background-color', '#4ff');
    $('#cnt1').width('300px');
    $('#cnt1').height('300px');

    $('#cnt1').droppable({
        drop: function( event, ui ) {                
            $(this).append(ui.draggable);
        }
    });

});

HTML:

<div id="cnt1">ddd</div>
<div id="diag1">Dialog 1</div>

If I drop the smaller div on the bigger one it hides away. Why?

Answer 1

Nothing really other than you’ve coded it so that when the div is dropped, it becomes a child of the larger div and then based on the positioning it ends up off screen. See what happens when you reposition the larger div: jsFiddle