Jquery draggable(), clone(), чтобы добавить div... Pls Fiddle my jsfiddle

UPDATE:

http://jsfiddle.net/wJUHF/7/
Это обновленная и рабочая скрипка для тех, кто может это прочитать.

Я пытаюсь заставить этот jfiddle работать.

вот где проблема. Я могу перетащить изображение в контейнер. Он добавляет клон, без проблем. Когда я нажимаю, чтобы перетащить клонированное изображение в контейнер, он работает правильно в первый раз. Во второй раз, когда я нажимаю, чтобы перетащить, он не перетаскивает, а клонирует уже клонированное изображение. Чтобы лучше понять, я создал jsfiddle. пожалуйста, посмотрите и сообщите мне, где я здесь ошибся.

http://jsfiddle.net/wJUHF/

Спасибо

CODE:

$(function(){  
    //Make every clone image unique.  
    var counts = [0];  
    $(".dragImg").draggable({
        helper: "clone",
        //Create counter
        start: function() { counts[0]++; }
    });

    $("#dropHere").droppable({
        drop: function(e, ui){
            $(this).append($(ui.helper).clone());
            //Pointing to the dragImg class in dropHere and add new class.
            $("#dropHere .dragImg").addClass("item-"+counts[0]);
            //Remove the current class (ui-draggable and dragImg)
            $("#dropHere .item-"+counts[0]).removeClass("dragImg ui-draggable ui-draggable-dragging");
            //not working 100%           
            $(".item-"+counts[0]).dblclick(function(){
                $(this).remove();
            });     

            //make the div draggable --- Not working???    
            make_draggable($(".item-1"));              
        }
    });

    var zIndex = 0;
    function make_draggable(elements)
    {   
        elements.draggable({
            containment:'parent',
            start:function(e,ui){ ui.helper.css('z-index',++zIndex); },
            stop:function(e,ui){}
        });
    }
});

HTML:

<body>
    <div class="dragImg"><img src="http://placehold.it/80x80">
     </div>
    <div id="dropHere"></div>
</body>

CSS

#dropHere {
    width:400px;
    height: 400px;
    border: dotted 1px black;
}

Ответ 1

Вам просто нужно условное дифференцирование в обработчике drop:

if(ui.draggable.hasClass("dragImg"))
     $(this).append($(ui.helper).clone());

Ответ 2

jQuery(".dragImg").draggable({
        //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
        helper: function() {
            return jQuery(this).clone().appendTo('body').css({
                'zIndex': 5
            });
        },
        cursor: 'move',
        containment: "document"
    });

РЕШЕННАЯ ПРОБЛЕМА UR JSFIDDLE DEMO