Question

我正在为孩子们制作游戏。它在打开后第一次播放时效果很好。但如果玩家选择再次玩，我就有问题。我有许多可拖动和可放置的元素，当我点击PLAY AGAIN按钮时，我设法通过复制事件内的函数来克隆可拖动元素。

但我有很多，比如30或40或者更多可放置的功能，如果我将整个代码复制到那个根本不实用的事件中，我只能克隆。

我尝试过使用clone（true，true），但它没有克隆可拖动和可放置的函数，所以我按照之前的说法进行了复制。

有没有办法克隆droppable函数而不复制它们？

哦，我正在使用jquery.ui中的可拖动和可放置的插件。

以下是克隆的代码：

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

现在我只尝试一个阶段，这就是为什么我只能克隆一个阶段。

这是可拖动的功能：

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

这是第一阶段的可放置功能：

        $( "#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(":");

        }

    }
});

这是PLAY AGAIN事件：

      $(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 );

});

我假设一旦调用克隆级别，droppable函数将具有相同的效果，因为元素的id不会改变。

Answer 1

我有时会做的只是创建一个函数，将droppable添加到传递的对象，因此它只写一次，但你可以多次调用它。像这样：

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(":");

        }

    }
});

然后在你的活动中：

add_droppable($("drop1"));

等等。如果需要，您还可以传递更多参数。

你可以用draggable做同样的事情，但对于你的draggable，正如评论中所说，你应该有一个可拖动元素的类，它会更有效率。

是否可以克隆droppable函数？

1 个答案: