是否可以克隆可放置功能？答案

【问题标题】：Is it possible to clone droppable function?是否可以克隆可放置功能？
【发布时间】：2015-05-06 23:25:25
【问题描述】：

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

但是我有很多，比如 30 或 40 个或者更多可删除的函数，如果我将整个代码复制到该事件中，我只能克隆这些函数，这根本不实用。

我尝试过使用 clone(true,true)，但它没有克隆可拖动和可放置的功能，所以我按照我之前所说的那样进行了复制。

有什么方法可以克隆可放置函数而不复制它们？

哦，我正在使用 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 不会更改。

【问题讨论】：

我在问题中发布了相关代码。另外我忘了说，其余的droppable函数，和我贴的基本一样。
你能拼出一个 jsFiddle 或 stack sn-p 来演示这个问题吗？
我会尝试，但与此同时，问题是连续第二次玩游戏时可放置的功能不起作用。
我理解这一点，但是了解它是什么类型的游戏、如何玩等等的完整背景，将更容易找出导致问题的原因。为什么你用 ID 来调用所有东西而不是使用一个类？

标签： jquery jquery-ui draggable droppable

【解决方案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，就像在cmets中所说的那样，你应该有一个用于draggable元素的类，这样会更有效率。

【讨论】：