title: Constrain fixed column width on drag
body: <p>OK, so here's the situation:</p>
  
  <ul>
  <li>I'm experimenting with a fixed-width (resizeable) left sidebar</li>
  <li>The sidebar contains draggable elements</li>
  <li>If one of the elements is dragged to the right, then the sidebar column seems to be scrolling right.</li>
  </ul>
  
  <p>Why is that happening? Any ideas on how this could be resolved?</p>
  
  <hr>
  
  <p><strong>Fiddle:</strong> <a href="http://jsfiddle.net/t5nnmh94/" rel="nofollow">http://jsfiddle.net/t5nnmh94/</a></p>
  
  <hr>
  
  <p><strong>Main HTML:</strong></p>
  
  <pre><code>&lt;div id="main_wrap"&gt;
              &lt;div id="sidebar" class="content-fluid"&gt;
                  &lt;span id="position"&gt;&lt;/span&gt;
                  &lt;div id="dragbar"&gt;&lt;/div&gt;
                  &lt;div id="components"&gt;&lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;Components&lt;/div&gt;
                          &lt;div class="panel-body"&gt;
  
                              &lt;div class="col-xs-6 component-item"&gt;&lt;div class="wrp" id="one"&gt;&lt;i class="glyphicon glyphicon-envelope"&gt;&lt;/i&gt;&lt;br/&gt;E-mail&lt;/div&gt;&lt;/div&gt;
                              &lt;div class="col-xs-6 component-item"&gt;&lt;div class="wrp" id="two"&gt;&lt;i class="glyphicon glyphicon-italic"&gt;&lt;/i&gt;&lt;br/&gt;Input&lt;/div&gt;&lt;/div&gt;
  
  
  
                              &lt;div class="col-xs-6 component-item"&gt;&lt;div class="wrp" id="three"&gt;&lt;i class="glyphicon glyphicon-text-width"&gt;&lt;/i&gt;&lt;br/&gt;Textarea&lt;/div&gt;&lt;/div&gt;
                              &lt;div class="col-xs-6 component-item"&gt;&lt;div class="wrp" id="four"&gt;&lt;i class="glyphicon glyphicon-file"&gt;&lt;/i&gt;&lt;br/&gt;File Upload&lt;/div&gt;&lt;/div&gt;
  
                              &lt;div class="col-xs-6 component-item"&gt;&lt;div class="wrp" id="five"&gt;&lt;i class="glyphicon glyphicon-asterisk"&gt;&lt;/i&gt;&lt;br/&gt;Password&lt;/div&gt;&lt;/div&gt;
                              &lt;div class="col-xs-6 component-item"&gt;&lt;div class="wrp" id="six"&gt;&lt;i class="glyphicon glyphicon-check"&gt;&lt;/i&gt;&lt;br/&gt;Checkbox&lt;/div&gt;&lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="content" class="content-fluid"&gt;
                  &lt;div class="row"&gt;
                  &lt;div class="col-xs-8" id="maina"&gt;
                  &lt;div class="panel panel-default" id="droppanel"&gt;
                      &lt;div class="panel-heading"&gt;Main&lt;/div&gt;
                      &lt;div class="panel-body" id="droppanelbody" &gt;
                          &lt;ul class="nav nav-tabs" role="tablist"&gt;
                              &lt;li class="active"&gt;&lt;a href="#ui-editor" role="tab" data-toggle="tab"&gt;UI Editor&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#code" role="tab" data-toggle="tab" data-tab="code"&gt;Code&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
  
                          &lt;div class="tab-content" style="margin-top:40px;"&gt;
                              &lt;div class="tab-pane fade in active" id="ui-editor"&gt;
                                  &lt;form role="form" id="theform"&gt;
  
                                  &lt;/form&gt;
                              &lt;/div&gt;
                              &lt;div class="tab-pane fade" id="code"&gt;
                                  &lt;textarea class="form-control" rows="5" id="thecode"&gt;
  
                                  &lt;/textarea&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-4" id="options"&gt;
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading"&gt;Options&lt;/div&gt;
                          &lt;div class="panel-body"&gt;
                              Panel content
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>