title: how to make '#box' draggable only by drag the '#head' div , not make the '#box' draggable when i drag '#content'
body: <p>this is my code :</p>
  
  <pre><code>&lt;div id="box" style="border:1px solid red;height:100px;width:150px;position:relative;background:#eee"&gt;
          &lt;div id="head" style="background:black"&gt;drag me&lt;/div&gt;
          &lt;div id="content" contenteditable=true style="border-bottom:1px solid red;height:70px;margin-bottom:5px;"&gt; edit it &lt;/div&gt;
          &lt;input id="ok" type="button" value="ok"/&gt;
          &lt;input id="cancel" type="button" value="cancel"/&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>and the script is :</p>
  
  <pre><code>$('#box').draggable()
  </code></pre>
  
  <p>the demo is here :<a href="http://jsfiddle.net/VRxZe/" rel="nofollow">http://jsfiddle.net/VRxZe/</a></p>
  
  <p>thanks</p>