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

});