перетащите с помощью jQuery

Question

В чем проблема со следующим кодом?

см. Здесь: 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>

Если я уроню меньший div на больший, он прячется.Почему?

Answer 1

#​diag1{
    position:absolute;
}

или добавить

$('#diag1').css('position', 'absolute');

Я не уверен на 100%, это то, что вы ищете?

http://jsfiddle.net

Answer 2

Не исчезает. Он добавляется к тому месту, куда вы упали, но сохраняет прежние значения позиции и заканчивается за кадром. Вы должны попытаться использовать position: absolute на diag1, чтобы в dropbleable не использовалось position: relative. Теперь координаты положения всегда будут измеряться относительно левого верхнего края документа, а не контейнера.

Answer 3

Ничего особенного, кроме того, что вы его закодировали, так что, когда div сбрасывается, он становится дочерним по отношению к большему div, а затем в зависимости от его расположения оказывается за пределами экрана.Посмотрите, что происходит, когда вы перемещаете больший div: jsFiddle

Answer 4

Если все, что вы хотите сделать, это держать перетаскиваемый объект в поле зрения, просто удалите следующее

$(this).append(ui.draggable); 

как уже упоминалось, добавление и позиционирование вызывают проблему.