.draggableを要素idで戻す

Question

これは可能かどうかわかりませんが、そうすべきです。

私は数式（3+2.25.2+2.3 ...）と、ドラグ可能な「カード」の両方の答えの束を持っています。彼らはすべてドラッグ可能で、式と答えに一致するようにカードをドロップする列があります。

答えが正しいかどうかを確認し、そうであればdraggablesとdroppableの両方を無効にする必要があります。両方のカードがfalseからtrueに変更されなければならない場合現在ドロップされているカードはui.draggable.draggable('option', 'revert', false);で正常に動作しますが、他のカードIDであっても、復帰値を真（$(saveID).draggable('option', 'revert', false);）に変更することはできません。

各カードと廃棄可能なスロットにはデータセットがあり、カードのデータとIDはアレイに保存されます。

droppablesはそれぞれ式カードと回答カードのdivを受け入れるように設定されており、dropにはそれを検証する関数があります。

これは問題を理解するのに十分ですか？ ：x

Answer 1

ここでは、答えを決定するために数式を実行する例を示します。スマートな受験生は、ソースコードを見て、コード内に答えの配列が隠されているかどうかを調べるかもしれません。

HTML

<div class="ui-widget questions"> 
    <div class="ui-widget-header"> 
    1. Math 
    </div> 
    <div class="ui-widget-content"> 
    <h5>Question</h5> 
    <div class="card addend"> 
     3 
    </div> 
    <div class="card operator plus"> 
     + 
    </div> 
    <div class="card addend"> 
     2.2 
    </div> 
    <div class="card operator equal"> 
     = 
    </div> 
    <div class="card unanswered"> 
     &nbsp; 
    </div> 
    <h5>Answers</h5> 
    <div class="card answer"> 
     4.5 
    </div> 
    <div class="card answer"> 
     3.2 
    </div> 
    <div class="card answer"> 
     5.2 
    </div> 
    <div class="card answer"> 
     5.5 
    </div> 
    </div> 
    <div class="ui-widget-header"> 
    2. Math 
    </div> 
    <div class="ui-widget-content"> 
    <h5>Question</h5> 
    <div class="card addend"> 
     5.2 
    </div> 
    <div class="card operator plus"> 
     + 
    </div> 
    <div class="card addend"> 
     2.3 
    </div> 
    <div class="card operator equal"> 
     = 
    </div> 
    <div class="card unanswered"> 
     &nbsp; 
    </div> 
    <h5>Answers</h5> 
    <div class="card answer"> 
     6.5 
    </div> 
    <div class="card answer"> 
     8.2 
    </div> 
    <div class="card answer"> 
     7.2 
    </div> 
    <div class="card answer"> 
     7.5 
    </div> 
    </div> 
</div> 

はJavaScript

function checkAnswer(a1, a2, op, answer) { 
    console.log(a1, op, a2, "=", answer); 
    var sum; 
    var ops = { 
    "+": function(a, b) { 
     return a + b; 
    }, 
    "-": function(a, b) { 
     return a - b; 
    }, 
    "*": function(a, b) { 
     return a * b; 
    }, 
    "/": function(a, b) { 
     return a/b; 
    } 
    } 
    sum = ops[op](a1, a2); 
    console.log(sum); 
    return (sum == answer); 
} 

$(function() { 
    $(".answer").draggable({ 
    revert: true, 
    containment: "parent" 
    }); 
    $(".unanswered").droppable({ 
    accept: ".answer", 
    drop: function(event, ui) { 
     var q = $(this).parent(); 
     var add1 = parseFloat(q.find(".addend").eq(0).html()); 
     var add2 = parseFloat(q.find(".addend").eq(1).html()); 
     var op1 = q.find(".operator").eq(0).html().trim(); 
     var ans = parseFloat(ui.draggable.html()); 
     var success = checkAnswer(add1, add2, op1, ans); 
     if (success) { 
     q.find(".unanswered").html(ans).toggleClass("unanswered answered"); 
     q.find(".answer").draggable("destroy").css({ 
      background: "#eee", 
      color: "#ccc" 
     }); 
     } else { 
     return false; 
     } 
    } 
    }); 
}); 

実施例：https://jsfiddle.net/Twisty/prc8tzw5/

元に戻すには、ここでtrueで、答えが正しいかどうかは、dropでそれを見ることができ、それをtに追加する彼はカード。また、ユーザーは質問を完了したことを知っているので、回答のドラッグが無効になっています。