title: jQuery Draggable Containment Overflow Hidden
body: <p>This is about dragging wider element than its parent (overflow: hidden). Parent's width and overflow options are fixed, cannot be changed.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;p class="text"&gt;The quick brown fox jumps over the lazy dog.&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.container {
    position:relative;
    width:300px;
    height:50px;
    background:#ccc;
    overflow:hidden; // be careful, changing to overflow-x:hidden breaks the answer
  }
  .text {
    position:absolute;
    top:7px;
    margin:0;
    width:1000px;
    font-size:30px;
  }
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>$('.text').draggable({
    axis: 'x',
  })
  </code></pre>
  
  <p>Modify this demo:
  <a href="https://jsfiddle.net/jeafgilbert/LtkkzccL/" rel="nofollow">https://jsfiddle.net/jeafgilbert/LtkkzccL/</a></p>
  
  <p>So that we can only drag the sentence <strong>without making spaces before or after the sentence</strong>.</p>