Javascript 如何克隆jQueryUI可拖动对象

我目前有一些jquery可拖动对象，它们位于具有多个页面的内容滑块中。这些对象将从内容滑块页面中拖出，并拖到位于滑块外部的“答案”框中。直到您在内容滑块中更改页面时，答案才会从“答案”框中“消失”，直到您返回到原来在滑块中的页面。我需要找到一种方法来创建可拖动对象的“副本”，即使页面在滑块中发生更改，该副本也会保留在答案框中

在做了一些研究之后，我找到了helper:clone选项，但似乎无法让它在克隆后保留在答案框中。我看到的另一个选项是，一旦拖放到应答框中，就在滑块外使用“appendTo”将其移动到一个新的容器中，这同样是它自己的问题。在花了好几个小时试图修复它之后，我真的不知道该怎么做了

下面是代码和屏幕截图。。。提前谢谢

Javascript/jQuery

// initialisation for all things regarding the drag and drop.
function init_dragDrop(){
    // setup draggable interface
    $(".answer").draggable({ snap: ".destinationBox", snapMode: "inner", revert: "invalid"});
    $( ".destinationBox" ).droppable({

        drop: function( event, ui ) {
            var matchedQuestion = null;
            var droppedQuestion = $(this).prevAll(".question:first").html();

            $.each(questionList, function(){
                if(this.body ===  droppedQuestion){
                    matchedQuestion = this;
                    return false;
                }
            });

            var draggedAnswer = $(ui.draggable[0]); 
            matchedQuestion._onCorrect = function(){draggedAnswer.css("backgroundColor", "green");  questionList[++currentQuestion].enable();} 
            matchedQuestion._onIncorrect = function() {
                draggedAnswer.css("backgroundColor", "red");    

            //resets answer to original position in the runbook, and revoves red background color
            $("#reset").click(function () {
                draggedAnswer.animate({
                    backgroundColor: "transparent",
                    top: "0px",
                    left: "0px"
                });
            });
        }

HTML

1.组建危机管理团队
我设置紧急会议线路
关键联系人
联系方式

电话号码

电子邮件地址

总经理

0123456789
MD@acme.com

截图

---

我相信helper只是被拖动对象的轮廓，以便用户在拖动过程中知道它在屏幕上的位置。当设置为“克隆”时，它将克隆正在拖动的对象，并在拖放时删除。我相信helper只是正在拖动的对象的轮廓，以便用户在拖动过程中知道它在屏幕上的位置。设置为“克隆”时，它将克隆正在拖动的对象，并在拖放时删除。

<div id="questionDiv">                      
<div class="question textbox" id="q1">1. Assemble the Crisis Management Team</div><div class="destinationBox"></div>
 <div class="question textbox" id="q2">i. Set up the emergency conference line</div><div class="destinationBox"></div>
    </div>

    <div class="content-switcher" id="answerDiv3" >

        <h2>Key Contacts</h2>
            <table>
                <tr>
                    <td><p><strong>Contact</strong></p></td>
                    <td><p><strong>Telephone Number</strong></p></td>
                    <td><p><strong>Email Address</strong></p></td>
                </tr>
                <tr>
                    <td><p>Managing Director</p></td>
                    <td><div class="dragDropSmallBox answer a1">0123456789</div></td>
                    <td><div class="dragDropSmallBox answer a2">M.D@acme.com</div></td>
                </tr>
    </table>
    </div>