I've been attempting to clone and drop a draggable object at the exact position within a droppable area where the drop event takes place. While I have come across examples online that demonstrate appending draggables to droppables, they all tend to relocate the draggable item to a predetermined location within the droppable upon initial drop.
Here's an illustration of this behavior: - http://jsfiddle.net/scaillerie/njYqA/
//JavaScript snippet from the provided jsfiddle
jQuery(function() {
jQuery(".component").draggable({
helper: function() {
return jQuery(this).clone().appendTo('body').css({
'zIndex': 5
});
},
cursor: 'move',
containment: "document"
});
jQuery('.ui-layout-center').droppable({
activeClass: 'ui-state-hover',
accept: '.component',
drop: function(event, ui) {
if (!ui.draggable.hasClass("dropped"))
jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
}
});
});
Is there any way to ensure that the draggable element remains positioned at the exact coordinates of the drop event?