javascript - как сделать несколько перетаскиваемых клонов?

Question

сейчас я пытаюсь сделать простую игру перетаскивания.

Первый раз, когда я перетаскиваю клоун, отлично работает, но он больше не позволяет мне перетаскивать клон.

Так что я хочу создать столько клонов, сколько перетаскиваю .... и я понятия не имею, как это сделать.

Пожалуйста, сначала взгляните на мой код.

function init(){ 
    var xCoordinate; 
    var yCoordinate; 
    var itemName; 

    $('#burger, #chicken, #fries, #hotdog, #soda').draggable({ 
     containment: '#screen', 
     start: getPosition, 
     helper: 'clone', 
     stop: dragStop, 
     revert: 'invalid' 
    }); 

    $('#A, #B, #C').droppable({ 
     drop: itemDrop 
    }); 
} 

function getPosition(event, ui){ 
    xCoordinate = ui.offset.left; 
    yCoordinate = ui.offset.top; 
}; 

«функция GetPosition» просто получить координаты х и у исходного перетаскиваемом элемента так, что клон может быть помещен в том же положении.

Я понимаю, что мне нужно копировать «дублирующие клоны»! под функцией droppable, но не знаю, как это сделать.

Answer 1

Код должен предоставить функцию для объекта drop. Эта функция должна клонировать помощника и добавлять его к droppable. Я представил базовый пример, который вы можете применить к своей реализации.

HTML

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
</ul> 
<div id="drop"></div> 

Javascript

$("li").draggable(
    {helper: "clone"} 
); 

$("#drop").droppable({ 
    accept: "li", 
    drop: function(event,ui){ 
     console.log(ui.helper); 
     $(this).append($(ui.helper).html());  
    } 
}); 

Рабочий примерhttp://jsfiddle.net/2W4jA/