Jquery UI - 表示から1つの要素を取り出す：ドラッグ時に非表示要素

Question

cssを使用してオーバーフロー：hiddenを設定した別の要素内の 'conveyor'要素に要素グループがあります。ドラッグすると、オーバーフローが隠されているホルダー要素の要素を '出す'方法を教えてください。 「アイテム」クラスの画像をドラッグすると、ホルダー内でドラッグするだけで、ホルダーの「外側」に移動しようとすると、それは隠され、古いホルダーエレメントの外側には移動しません。助けてください....

<div class="holder" style="overflow:hidden;"> 
    <div class="conveyor"> 
      <img src="image1.jpg" class="item" /> 
      <img src="image2.jpg" class="item" /> 
      <img src="image3.jpg" class="item" /> 
    </div> 
</div> 

<script> 

    $('.item').draggable(); 

</script> 

は、私はまた、親要素に、新たに移動要素を追加しようとしたが、その後の項目は戻って私のホルダーに戻りません！

は、アイテムを追加しようとした。これらのいずれかは、あなたが望むものを

$('.item').draggable(
    helper:'clone'; 
    revert:'invalid', 
    start:function(){ 
      $(this).parent().parent().append(this); 
    } 
) 

Answer 1

得るのですか？

$('.item').draggable({containment: 'window'}); 

$('.item').draggable({containment: 'document'}); 

Answer 2

ここで答えが見つかりました - >http://docs.jquery.com/UI/Draggable。 Yeesh ...それは数時間の掘削でした！

appendToオプションに渡された要素または選択された要素は、ドラッグ中のドラッグ可能なヘルパーのコンテナとして使用されます。デフォルトでは、ヘルパーはドラッグ可能なコンテナと同じコンテナに追加されます。

$('.selector').draggable({ appendTo: 'body' }); 

ありがとうございました！

Answer 3

まず、Davidに感謝します。私の場合は、別のオプションを追加する必要がありました：

// Drag and Drop 
$('.draggable').draggable({ 
    revert: true, 
    appendTo: 'body', 
    helper: 'clone' 
});