title: Droppable not working
body: <p>I'm trying to get draggable and droppable working and the drop part of this is not working. </p>
  
  <pre><code>$(function(){
      $(".draggable").draggable();
      $("#dashboard").droppable({
          drop: function(){
              alert("HEY!");
          }
      });
  });
  </code></pre>
  
  <p>Where am I making the mistake?</p>
  
  <p>HTML-</p>
  
  <pre><code>&lt;div class="leftSide"&gt;
      LeftSide
      &lt;div id="favouritesDashboard" class="dashboard dashBoardIn"&gt;
           Dashboard
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="center"&gt;
     Center
     &lt;div class="draggable"&gt;
        DraggableTest
     &lt;/div&gt;
  </code></pre>
  
  <p>This could also be an issue with version compatibility-</p>
  
  <pre><code>   &lt;script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
   &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>OTHER CODE THAT IS THERE-</p>
  
  <pre><code>$(dashboard).click(function(){
      console.log("HELLO");
      if($(dashboard).hasClass("dashBoardIn")){
          $(dashboard).removeClass("dashBoardIn");
      $(dashboard).addClass("dashBoardOut");
      $(".dashboard").stop().animate({'marginLeft':'-2px'},200);
  } else{
      if($(dashboard).hasClass("dashBoardOut")){
          $(dashboard).removeClass("dashBoardOut");
          $(dashboard).addClass("dashBoardIn");
      $(".dashboard").stop().animate({'marginLeft':'-85px'},200);
      }
  }
  });
  </code></pre>
  
  <p>ANSWER-</p>
  
  <p>Ok, so turns out I needed to add in an "accept" - like this</p>
  
  <pre><code>    $("#favouritesDashboard").droppable({
      accept:".draggable",
      drop: function() {
          console.log("HEY!");
      }
  });
  </code></pre>