Question

我目前有一些jquery可拖动对象，它们位于具有多个页面的内容滑块中。这些对象被拖出内容滑块页面并进入位于滑块外部的“答案”框。这样做直到您更改内容滑块中的页面，然后答案从答案框中“消失”，直到您返回到它们最初打开的滑块中的页面。我需要找到一种方法来创建可拖动对象的“副本”，即使页面在滑块中发生变化，它也将保留在答案框中。

在做了一些研究之后，我找到了帮助：克隆选项，但是一旦克隆它就无法让它留在答案框中。我看到的另一个选项是将拖动器移动到一个新的容器中，一旦它被放在答案盒中，使用滑块外的'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

<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>

截图

如何克隆jQueryUI可拖动对象

0 个答案: