title: Containment in jquery
body: <p>I am trying to create switch buttons with on/off states(Using twitter bootstrap).</p>
  
  <p>In this demo you can see that i have outer border to button. Button draggable is true to x-Offset. </p>
  
  <p>I want button not to go out of my boundary. So i put it in a <code>div</code> element and set it to some width.
  I don't think it is going good.</p>
  
  <p>Please suggest me what can i do to bound this button in border area.</p>
  
  <p>Fiddle link-
  <a href="http://jsfiddle.net/stackmanoz/w6AsC/3/" rel="nofollow">http://jsfiddle.net/stackmanoz/w6AsC/3/</a></p>
  
  <p>Some code shelf-</p>
  
  <pre><code>&lt;div style="width:200px;border:1px dashed #ddd"&gt;
      &lt;p id="button" class="btn-inverse btn"&gt;Regular link&lt;/p&gt;
  &lt;/div&gt;         
  </code></pre>
  
  <p>And script-</p>
  
  <pre><code>$(document).ready(function () {
  
  
          $('#button').draggable({ axis: 'x' });
  
      });
  </code></pre>