Alright, let's talk about the current scenario:
- I'm playing around with a fixed-width (resizeable) left sidebar
- The left sidebar contains draggable elements
- If one of these elements is dragged to the right, the entire sidebar seems to shift along with it.
Why is this happening? Any suggestions on how to fix this issue?
Fiddle: http://jsfiddle.net/t5nnmh94/
Main HTML:
<div id="main_wrap">
<div id="sidebar" class="content-fluid">
<span id="position"></span>
<div id="dragbar"></div>
<div id="components"><div class="panel panel-default">
<div class="panel-heading">Components</div>
<div class="panel-body">
<div class="col-xs-6 component-item"><div class="wrp" id="one"><i class="glyphicon glyphicon-envelope"></i><br/>E-mail</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="two"><i class="glyphicon glyphicon-italic"></i><br/>Input</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="three"><i class="glyphicon glyphicon-text-width"></i><br/>Textarea</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="four"><i class="glyphicon glyphicon-file"></i><br/>File Upload</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="five"><i class="glyphicon glyphicon-asterisk"></i><br/>Password</div></div>
<div class="col-xs-6 component-item"><div class="wrp" id="six"><i class="glyphicon glyphicon-check"></i><br/>Checkbox</div></div>
</div>
</div>
</div>
</div>
<div id="content" class="content-fluid">
<div class="row">
<div class="col-xs-8" id="maina">
<div class="panel panel-default" id="droppanel">
<div class="panel-heading">Main</div>
<div class="panel-body" id="droppanelbody" >
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#ui-editor" role="tab" data-toggle="tab">UI Editor</a></li>
<li><a href="#code" role="tab" data-toggle="tab" data-tab="code">Code</a></li>
</ul>
<div class="tab-content" style="margin-top:40px;">
<div class="tab-pane fade in active" id="ui-editor">
<form role="form" id="theform">
</form>
</div>
<div class="tab-pane fade" id="code">
<textarea class="form-control" rows="5" id="thecode">
</textarea>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4" id="options">
<div class="panel panel-default">
<div class="panel-heading">Options</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>