Is it possible to clone droppable function?

Question

I am making a game for children. It works perfectly when it is played for the first time after being opened. But if the player chooses to play again I have a problem. I have many draggable and droppable elements, and I managed to clone the draggable elements by copying the function inside the event when the PLAY AGAIN button is clicked.

But I have many, like 30 or 40 or maybe more droppable functions which I can only clone if I copy the whole code inside that event which is not practical at all.

I've tried with clone(true,true) but it didn't clone the draggable and droppable functions so I did it with copying as I said before.

Is there any way to clone droppable functions without copying them?

Oh, I am using the draggable and droppable plugins from jquery.ui.

Here is the code for the cloning:

        var one, two, three, four, five, six, seven, eight;
        one = $("#one").clone(true,true);

Right now I am trying only for one stage so that's why I have only cloning for one.

This is the draggable function:

        $(function() {
    $( "#dr1,#dr2,#dr3,#dr4,#dr5, #dr6, #dr7, #dr8, #dr9, #dr10, #dr11, #dr12, #dr13, #dr14, #dr15, #dr16, #dr17, #dr18" )
        .draggable({containment:"#wrapper", scroll:false});
});

This is the droppable function for the first stage:

        $( "#drop1" ).droppable({
    accept: "#dr1",
    drop: function( event, ui ) {
        $(this).addClass("morph");
        scream.play();
        txt=$("#dr1").text();

       $(".drop1").html(txt);
       $("#dr1").hide();

          poeni += 1;
        points += 5;
        $("#poeni").html(points);

          if(poeni==2){
            $( "#wrapper" ).addClass( "back" );
            $("#firstNext").show();
            end = $("#time").text();
            niza = end.split(":");

        }

    }
});

And this is the PLAY AGAIN event:

      $(document).on("click","#Yes", function(){
    $("#one").replaceWith(one);

    $(function() {
        $( "#dr1,#dr2,#dr3,#dr4,#dr5, #dr6, #dr7, #dr8, #dr9, #dr10, #dr11, #dr12, #dr13, #dr14, #dr15, #dr16, #dr17, #dr18" )
            .draggable({containment:"#wrapper", scroll:false});
    });


    game.play();
    points = 0;
    $("#stazi").show();
    $("#final, #one,#two,#three,#four,#five,#six,#seven,#eight").hide();
    $("#one").show();
    $("#poeni").html(points);
    setTimeout( function(){

            game.pause();
            $("#stazi").fadeOut(1000);
            $("#finalPoints").html(points);

            $("#final").delay(1000).fadeIn(2000);
            win.play();

        }
        , 60000 );

});

I assumed that once the cloned levels are called, that the droppable function will have the same effect because the ids aren't changed for the elements.

I posted the relevant code in the question. Also I forgot to mention, the rest of the droppable functions, are basically the same as the one I posted. — Spirit_Scarlet
Can you put together a jsFiddle or stack snippet that demonstrates the problem? — apaul
I'll try but in the mean time, the problem is that the droppable functions doesn't work when the game is played for the second time in a row. — Spirit_Scarlet
I understand that bit, but having the full context of what sort of game it is, how it is played, and so on, will make it easier to figure out whats causing the problem. Why are you calling everything by ID rather than using a class? — apaul

Julien Grégoire Julien Grégoire · Accepted Answer · 2015-05-07T00:21:48

What I sometime do is simply create a function that adds the droppable to passed object so it's written only once, but you can call it many times. Like this:

function add_droppable(jquery_obj){
  jquery_obj.droppable({
    accept: "#dr1",
    drop: function( event, ui ) {
        $(this).addClass("morph");
        scream.play();
        txt=$("#dr1").text();

       jquery_obj.html(txt);
       $("#dr1").hide();

          poeni += 1;
        points += 5;
        $("#poeni").html(points);

          if(poeni==2){
            $( "#wrapper" ).addClass( "back" );
            $("#firstNext").show();
            end = $("#time").text();
            niza = end.split(":");

        }

    }
});

And then in your event:

add_droppable($("drop1"));

And so forth. You can also pass more parameters if you need.

And you can do the same with draggable, but for your draggable, as said in comments, you should have a class for draggable elements, it would be much more efficient.

Is it possible to clone droppable function?

1 Answers