title: HTML5 draggable within a boundary
body: <p>Html5 element has a new attribute, draggable, and used it like this.</p>
  
  <p><a href="http://www.w3.org/TR/2011/WD-html5-20110405/dnd.html" rel="nofollow">http://www.w3.org/TR/2011/WD-html5-20110405/dnd.html</a></p>
  
  <pre><code> &lt;div draggable="true"&gt;foo&lt;/div&gt;
  </code></pre>
  
  <p>it also accept an event ondrag with argument a mouse event.</p>
  
  <pre><code> &lt;div draggable="true" ondrag="drag(event)"&gt;foo&lt;/div&gt;
  </code></pre>
  
  <p>My question is; Is there a way to set a drag boundaries, so that I can drag horizontally only , like in JQuery, <a href="http://jqueryui.com/draggable/#constrain-movement" rel="nofollow">http://jqueryui.com/draggable/#constrain-movement</a>. </p>
  
  <p>Without using JQuery.. with Javascript only..</p>