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

});