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> 

を、私はそれが離れて隠して大きな1に小さいのdivを削除した場合。どうして？

Answer 1

divを削除すると大きなdivの子になり、その位置に基づいて画面外になります。あなたが探しているものこれで、jsFiddle

Answer 2

#​diag1{ 
    position:absolute; 
} 

または

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

を追加し、私は100％を確認していない？あなたは大きなdivの位置を変更するときに何が起こるかを参照してください。

http://jsfiddle.net

Answer 3

それは消えることはありません。ドロップした場所に追加されますが、古い位置の値は保持され、オフスクリーンで終了します。 diag1にposition: absoluteを使用してください。そのため、droppableはposition: relativeを使用しません。位置座標は、コンテナではなく、ドキュメントの左上に対して常に測定されます。

Answer 4

あなたがしたいすべてがAPPENDと位置決めが問題を引き起こしていると述べた後、ちょうど次

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

を削除し、ビューにドラッグ可能に保つある場合。