jQuery的克隆圖像，而是從外部容器

Question

拖動只有當我有2個html元素，

1. <div class="drag">..example.jpg..</div>包含可以被拖動/克隆圖像/丟棄。
2. <div class="drop-zone"></div>是他們可以放入的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

基本上，現在，drop事件一再發生，不管你是從外面或容器內拖動圖像。最簡單的辦法是檢查圖像是否已經在容器內，如果是這樣，請不要將其添加到容器：

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' 
    }); 

});