jQueryのクローン画像が、外部容器

Question

からドラッグした場合にのみ、私は2つのHTML要素、

<div class="drag">..example.jpg..</div>

1がクローニング/ドラッグすることができるイメージを含むを有する/ドロップ。
2. <div class="drop-zone"></div>は、ドラッグ可能な状態にあり、ドラッグを保持できるが、クローン可能ではありません。

デモ：http://jsfiddle.net/rGUma/2/。

しかし、私はドラッグしたときに.drop-zoneにドロップされた画像を複製したくありません。クローニングは、コンテナの外側からドラッグした場合にのみ可能です。 （ボックス内の画像をドラッグし、その画像をドラッグすると、クローンが引き続き表示されます）。

これを行うための簡単な方法は、私が見落としているか、上記のコードを別の方法で完全にやり直す必要がありますか？

コードの参照：

$(document).ready(function($) { 

    $(".drop-zone").droppable({ 
     accept: '.drag', 
     drop: function(event, ui) { 
      $(this).append($(ui.helper).clone()); 
      $(".drag").addClass("item"); 
      $(".item").removeClass("ui-draggable"); 
      $(".item").draggable({ 
       containment: '.drop-zone' 
      }); 
     } 
    }); 
    $(".drag").draggable({ 
     helper: 'clone' 
    }); 

});​ 

Answer 1

基本的には、今、ドロップイベントを使用すると、外側または容器の内部から画像をドラッグしているかどうか、何度も何度も発生します。最も簡単な解決策は、画像がコンテナの内側にすでにあるかどうかを確認し、そうであれば、コンテナに追加していないです。

jQuery(function($) { 

    $('.drop-zone').droppable({ 
     accept: '.drag', 
     drop: function(event, ui) { 
      var $clone = ui.helper.clone(); 
      if (!$clone.is('.inside-drop-zone')) { 
       $(this).append($clone.addClass('inside-drop-zone').draggable({ 
        containment: '.drop-zone' 
       })); 
      } 
     } 
    }); 

    $('.drag').draggable({ 
     helper: 'clone' 
    }); 

});