title: How to run a droppable function more than once
body: <p>So far I have two images(one man and one woman) that are draggable. When I drag the man, I want the droppable image to change to a man and same for the woman. So far it works, but let's say I already changed the droppable image to a man. Then when I drag the woman over, it will not switch to an image of a woman. It only sticks to the first image that it changes to and I want the user to be able to drag and change the image multiple times. </p>
  
  <pre><code>    &lt;div class="types"&gt;
      &lt;h1&gt;TWO TYPES OF HARRASSMENT&lt;/h1&gt;
      &lt;p&gt;Click and drag the employees to reveal more information.&lt;/p&gt;
      &lt;img class="draggable-woman" src="images/drag-woman.png" /&gt;
      &lt;img class="draggable-man" src="images/drag-man.png" /&gt;
      &lt;/br&gt;
      &lt;div class="types-child"&gt;
          &lt;img class="quid" src="images/quid-empty.png" /&gt;
          &lt;div class="changeable-text"&gt;&lt;/div&gt;
          &lt;img class="hostile" src="images/hostile-empty.png" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(".draggable-woman").draggable({
      helper: "clone"
    });
    $(".draggable-man").draggable({
      helper: "clone"
    });
  $(".quid").droppable({
      drop: function( event, ui ) {
          if ($(ui.draggable).hasClass("draggable-woman")){
          $(this).replaceWith("&lt;img class='quid' src='images/quid-withwoman.png'&gt;");
  
          } else {
          $(this).replaceWith("&lt;img class='quid' src='images/quid-withman.png'&gt;")
          }
      }
  });
  &lt;/script&gt;
  </code></pre>