When I make a draggable clone and drop it in a droppable I cannot drag it again
Solution 1:
One way to do it is:
$(document).ready(function() {
$("#container").droppable({
accept: '.product',
drop: function(event, ui) {
$(this).append($("ui.draggable").clone());
$("#container .product").addClass("item");
$(".item").removeClass("ui-draggable product");
$(".item").draggable({
containment: 'parent',
grid: [150,150]
});
}
});
$(".product").draggable({
helper: 'clone'
});
});
But I'm not sure if it is nice and clean coding.
Solution 2:
I found this question via Google. I couldn't keep the positions from snapping to the container either, until I changed 'ui.draggable' to 'ui.helper' when appending:
$(this).append($(ui.helper).clone());
Solution 3:
For those trying to reposition the dropped item. Take a look here.
Jquery drag /drop and clone.
I actually had to use code that looks like
$(item).css('position', 'absolute');
$(item).css('top', ui.position.top - $(this).position().top);
$(item).css('left', ui.position.left - $(this).position().left);
to do it.