[jQuery] Draggable isn't switched on in cloned div?

[Olav Stetter]

Hi everyone,

spent the whole day trying to locate the problem here, so I would
really appreciate any ideas you might have on this one:

We have several "modules" in some sort pool (actually called "pool")
and want to drag them into a selection box ("auswahl") where we change
the CSS class from "pool_modul" to "auswahl_modul". So we clone one
module-div  and can drop it into the "semester"-box, works
beautifully. Depending on if it came from another "semester" or the
"pool" we change the CSS as I said, but the problem is the same: For
some reason, we cannot drag them around any more. Guess the module
isn't really set "draggable".

I can't really see a reason why this should be difficult. Any ideas
would be great, because I not much of an expert on this stuff.

Anyway, our code looks like this:

var drop_in_auswahl = function
(modul_id,modul_class,semester,ui_draggable,this_semester,ui_helper){

        var this_copy = $(ui_draggable).clone(true);
        var this_copy_class = $(this_copy).attr("class");

        if (this_copy_class =="pool_modul ui-draggable"){
                $(this_copy).attr("class","auswahl_modul");
        }

        var this_subsemester = $(this_semester).find("div.subsemester");
        $(this_subsemester).append(this_copy);

        // draggable (setting the following line to $
(".auswahl_modul").draggable and so on doesn't help...
        $(".auswahl_modul ui-draggable").draggable({
                        revert : "invalid",
                        helper : "clone"
                });

        // ui_helper sowie ui_draggable sind versteckt
        $(ui_helper).remove();
        $(ui_draggable).hide();
}


-----------------

And this is the function that actually calls the above:

                $(".semester").droppable({

                        hoverClass : 'drophover',
                        accept     : '.pool_modul ,.auswahl_modul',
                         drop: function(event, ui){

                                 var ui_draggable = $(ui.draggable);
                                 var ui_helper = $(ui.helper);
                                 var this_semester = $(this);
                                 var semester = $(this).attr("id");
                                 var modul_id = $(ui.draggable).attr("id");
                                 var modul_class = 
$(ui.draggable).attr("class");


                                 drop_in_auswahl
(modul_id,modul_class,semester,ui_draggable,this_semester,ui_helper);
                        }
                });