Hi there, I've tried to achieve a simple thing with draggables. Put little pictures (wrapped in divs) on top of a bigger one using the drag-and- drop technique. This is what I've come up with:
function makeDraggable(expr) { /** * Makes the selection (by expr) draggable */ $(expr).draggable( { start: function() { // only clone if clone is not yet present if ( $(".draggedClone").length == 0 ) { if ($(this).next().is("#addons .draggable")) { $(this).next().before($(this).clone().css("position", "static").addClass("draggable").addClass("draggedClone")); } else { $(this).clone().css("position", "static").addClass("draggable").addClass("draggedClone").appendTo($ (this).parent()); } $(this).attr("id", $(this).attr("id") + '_' + ($ (".draggable").length + 1) ); $(this).addClass("dragged"); } makeDraggable(".draggable"); }, stop : function(){ // $(".draggedClone").removeClass("draggedClone"); // FIXME: remove dragged element if not dropped in the drop area } } ); } $(document).ready(function(){ (...) makeDraggable("#addons .draggable"); $("button[name='rebind']").click(function() { $("#addons .draggable").toggleClass("highlighted"); makeDraggable("#addons .draggable"); }); }); What happens is that the initial draggable divs work fine. They can be dragged and dropped onto the big image. But the created clones do not respond to dragging (i.e they are not draggable). I think they should because of the makeDraggable(".draggable") line in the start function of the draggable. I've created the 'rebind' button to explicitly assign dragability to the clones but it did not help. (I've only added the toggleClass("highlighted") to see if the selection formula is correct, it is. Has anyone had the same problem or is this a bug? (I've tried in several browsers none of them worked). Or am I being silly? Thank you for your help in advance, Balint