Hello there, I am trying to accomplish a seemingly easy task, drag some small pictures onto a bigger one. I also want the dragged pictures to be cloned, so more of them could be used for the aforementioned purpose. What I've come up with is the following:
<pre> 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"); }); }) </pre> The problem is that the original images (wrapped in a div with class "draggable") work all right they can be dragged around easily. However, the clones are not draggable for some reason. I even tried to explicitly add dragability to the clones by using the 'rebind' button but it does not help either. It does make the original divs draggable but not the clones. (The toggleClass("highlighted") row is just to see if the divs to be made draggable are correctly selected with the expression: they are.) Has someone bumped into the same problem or is this a known bug? Or am I doing something really silly? :) Thank you for your help in advance, Balint