When I make a draggable clone and drop it in a droppable I cannot drag it again
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.
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());
For those trying to reposition the dropped item. Take a look here.
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.