title: Drag and drop checking
body: <p>I want to check if what is being dropped is the correct answer and when everything is dropped at the right droppable area, then it will alert something.</p>
  
  <p>Correct answer - drop1 (droppable) &amp; ans1 (draggable item) and drop2 (droppable) &amp; ans2 (draggable item) - once both conditions are fulfilled then the alert will pop out. However i can't seem to do it.</p>
  
  <p>HTML:</p>
  
  <pre><code>//droppable area
  
  &lt;div id="drop1" class="b1" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px"&gt;
  &lt;/div&gt;
  &lt;div id="drop2" class="b2" style="background-color: white; border: solid; height: 6vw; width: 13vw; border-radius: 7px"&gt;
  &lt;/div&gt;
  
  //draggable item
  
  &lt;div id="ans2" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px"&gt;
  a change
  &lt;/div&gt;
  
  &lt;div id="ans1" style="background-color: white; border: solid; cursor: move; height: 6vw; width: 13vw; border-radius: 7px"&gt;
  chemical reaction system
  &lt;/div&gt;
  </code></pre>
  
  <p>Jquery:</p>
  
  <pre><code>        $("#drop1, #drop2).droppable({
                  drop: function (event, ui) {
  
                      var div = event.target.id;
                      var element = ui.draggable.attr('id');
  
                      if ((element === "ans1" &amp;&amp; div === "drop1") &amp;&amp; (element === "ans2" &amp;&amp; div === "drop2")) {
                          alert("success");
  
                      }
      }
  });
  </code></pre>