Javascript 拖动时约束固定列宽

好的，情况是这样的：

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

为什么会这样？有没有办法解决这个问题

---

小提琴：

---

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

组件

电子邮件

输入

文本区域

文件上传

密码

复选框
主要




选择权
面板内容

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

您可以尝试以下方法：

overflow: hidden;

---

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

好的，我有它-只需执行以下操作：

#components{
    overflow: visible;
}

#draggableHelper{
    z-index: 100;
}

.panel{
 z-index: 99;
}

#sidebar{
  overflow: visible;
}

---

应该有用。

有没有可能展示一个JSFIDLE.net来演示这个问题？@RobSchmuecker刚刚更新了原始问题！：-）嗯，刚刚试过。但事情是这样的：正如预期的那样，滚动不再发生。但是：draggable元素消失了（因为它隐藏在…溢出部分，我猜）。有什么想法吗？你在说什么滚动？正在发生的那个。无论如何，你的解决方案解决了这个问题。但是，当拖动超出其容器限制的元素时，它现在将消失。有什么想法吗？太棒了。非常感谢，伙计！；-）另一个快速（？）一个：你知道为什么这个不起作用吗？(). 这在概念上是完全一样的（设计稍微好一点）。然而，无论我如何使用

z-index

s和

overflow

s，我都无法让它工作。（好的，如果你看一下代码，你可能会注意到…过度使用z-indexs，哈哈，但我不是这些东西的专家！哈哈）好的，为这个问题创建一个新的问题。