title: Jquery UI - Droppable block inside droppable wrapper
body: <p>I'm really stuck. I want to be able to drag a jQuery UI block in a droppable div inside a droppable wrapper. </p>
  
  <p>I need to get the id of the div where the block is being dropped. </p>
  
  <p>js: </p>
  
  <pre><code>$( ".wrapper" ).droppable({
  
              drop: function( event, ui ) {
                  alert('dropped in the wrapper');
              }
  
          });
  $( ".inside" ).droppable({
  
              drop: function( event, ui ) {
                  alert('dropped inside');
              }
  
          });
  $( ".outSide" ).droppable({
  
              drop: function( event, ui ) {
                  alert('dropped OutSide');
              }
  
          });
  $( ".block" ).draggable();
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.wrapper {
      width:200px;
      height:250px;
      background-color:#0f0;
      text-align:center;
      line-height:200px;
      vertical-align:middle;
  }
  
  .inside {
      display:inline-block;
      vertical-align:middle;
      width:100px;
      height:110px;
      border:1px solid #000;
  
  }
  .outSide {
      display:inline-block;
      width:100px;
      height:200px;
      position:relative; 
      float:left;
      left:240px;
      top:40px;
      border:1px solid #000;
  
  }
  
  .block {
      width:80px;
      height:30px;
      background-color:#00f;
      display:inline-block;
  }
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      Wrapper
      &lt;div class="inside"&gt;
          Inside
      &lt;/div&gt;
  &lt;/div&gt;
         &lt;div class="outSide"&gt;
         Outside
      &lt;/div&gt;
  &lt;br /&gt;&lt;br /&gt;
  
          &lt;div class="block"&gt;&lt;/div&gt;
  
  &lt;br /&gt;&lt;br /&gt;
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/J7azG/23/" rel="nofollow">http://jsfiddle.net/J7azG/23/</a></p>