jQuery UI - Draggable Helper Clone

Question

Заранее благодарю вас за это!

Моя цель:

• После перетаскивания объекта в художественный холст, оригинал (или копия) объекта должна оставаться в «Панели инструментов» в верхней части, так что пользователь может использовать это неоднократно.

• После того, как тащили объект упал на художественный холст, мне нужно, чтобы он оставался перетаскиваемым по всему холсту, если пользователь решает, что он/она хочет, чтобы переместить его

Что происходит:

• (полный) Объект клонируется, как ожидалось, и опускается на холст
• Объект больше не перетаскивается вдоль холста после его сброса. Я пытаюсь понять, как сохранить его перетаскиваемым после падения.

Опция clone была единственным способом, которым я смог создать новый экземпляр объекта с перетаскиванием, возможно, я думаю не в том направлении.

Я создаю клон как таковой:

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

$("#artCanvas").droppable({ 
    accept: ".objectDrag", 
    drop: function(event,ui){ 
     var new_smiley = $(ui.helper).clone(); 
     $(this).append(new_smiley); 
    } 
}); 

Вот JSFiddle для визуального того, что происходит: http://jsfiddle.net/YRfVd/55/

Пожалуйста, дайте мне знать, если я неясные в любом случае или может дать дополнительное объяснение. Опять же, большое вам спасибо за то, что нашли время, чтобы посмотреть на это - вы, ребята, потрясающие!

Натан

Answer 1

Вы можете инициализировать функции перетаскивания на клон по draggable() функциям и удалить класс objectDrag таким образом, чтобы вновь добавленные объекты не начинают создавать свои собственные клоны.

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

$("#artCanvas").droppable({ 
    accept: ".objectDrag", 
    drop: function(event,ui){ 
     var new_signature = $(ui.helper).clone().removeClass('objectDrag'); 
     new_signature.draggable(); 
     $(this).append(new_signature); 
    } 
}); 

JSFiddle: http://jsfiddle.net/YRfVd/56/