title: Draggable from inside
body: <p>I have one question and I can't find an answer for this...
  I have the follow code:</p>
  
  <p>Style:</p>
  
  <pre><code>&lt;style&gt;
    #out{ width: 150px; height: 150px; border: 1px solid red;}
    #test{ height:20px; widht: 100%; background-color:red; margin: 0;}
  &lt;/style&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> $(function() {
    $( "#out" ).draggable();
   });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="out" class="ui-widget-content"&gt;
      &lt;div id="test"&gt;
          test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With this code I can dragg my div with id "out".
  But what I want is that div with id "out" only be draggable when I'm dragg the inside div with id "test". To give an idea I want do the same efect that Windows window, only be draggable when u dragg top bar.</p>
  
  <p>I already tested with jquery</p>
  
  <pre><code>$("test").focus(function(){
    $(this).parent().draggable();
  });
  </code></pre>
  
  <p>But doesn't works...</p>
  
  <p>Someone know what can I do?
  Alot thanks.</p>