拖动时约束固定列宽

Question

好的，情况如下：

• 我正在尝试使用固定宽度（可调整大小）的左侧边栏
• 侧边栏包含可拖动元素
• 如果将其中一个元素拖到右侧，则侧边栏列似乎在向右滚动。

为什么会这样？关于如何解决这个问题的任何想法？

---

小提琴： http://jsfiddle.net/t5nnmh94/

---

主 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>

Answer 1

好的，我知道了 - 这样做：

#components{
    overflow: visible;
}

#draggableHelper{
    z-index: 100;
}

.panel{
 z-index: 99;
}

#sidebar{
  overflow: visible;
}

应该可以。

Answer 2

当您移动面板正文中的项目时，它会更改面板大小以匹配其中的所有内容。 这是默认行为。

你可以试试：

overflow: hidden;

它将隐藏任何可见的溢出并保持块大小不变。