html - Bootstrap 3 - 水平拖动带有垂直滚动条的元素，overflow-y : scroll

Question

在我的 previous post 失败之后，我听从了建议并使用 Bootstrap 的 Dashboard 示例作为基础，不幸的是没有成功。

目标是一个带有侧边栏 (col-md-3) 的页面，其中包含所有未分类学生的面板(每个小面板)，以及包含不同组(较大面板)的主要区域 (col-md-9) )，其中可以使用 JQeryUI Sortable 拖放学生。 This screenshot shows the concept.

这工作正常，除了一个问题:虽然侧边栏没有水平滚动条(即使选择“overflow-x: auto”)，但当试图从中拖出一个面板时它似乎变得更大。 This screenshot at the moment when I am dragging the fourt panel from above shows the problem.

这是代码的简化版本:

CSS:

<link href="/static/css/bootstrap.css" rel="stylesheet" media="screen">
<style type="text/css">
    body {
        padding-top: 60px;
        padding-bottom: 40px;
    }

    @media (min-width: 768px) {
      .sidebar {
        position: fixed;
        top: 51px;
        bottom: 0;
        left: 0;
        z-index: 1000;
        padding: 20px;
        overflow-y: auto;
      }
    }
</style>

HTML:

<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-3 sidebar">
            <div class="unsortedList panel panel-default">
                <div class="panel-heading">
                    Not assigned
                </div>
                <div class="panel-body">
                    <ul id="0" class="list-unstyled connectedLists">
                        <li class="panel panel-primary innerpanel" id="student_1_id">
                            <input type="hidden" name="student_1_id" value="0">
                            <div class="panel-body">
                                Student 1 Name
                            </div>
                        </li>
                        <li class="panel panel-primary innerpanel" id="student_2_id">
                            <input type="hidden" name="student_2_id" value="0">
                            <div class="panel-body">
                                Student 2 Name
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="col-sm-8 col-sm-offset-4 col-md-9 col-md-offset-3 main">
            <div class="col-md-4 col-sm-4 col-xs-5" id="panel_1">
                <div class="panel panel-default outerpanel">
                    <div class="panel-heading">
                        Group 1
                    </div>
                    <div class="panel-body">
                        <ul id="1" class="list-unstyled connectedLists">
                            <li class="panel panel-primary innerpanel" id="student_3_id">
                                <input type="hidden" name="student_3_id" value="1">
                                <div class="panel-body">
                                    Student 3 Name
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 col-xs-5" id="panel_2">
                <div class="panel panel-default outerpanel">
                    <div class="panel-heading">
                        Group 2
                    </div>
                    <div class="panel-body">
                        <ul id="2" class="list-unstyled connectedLists">
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

(功能和简化的)Javascript 代码:

$(document).ready(function(){

    jQuery(function(event, ui) {
        $('.connectedLists').sortable({
            connectWith: ".connectedLists",
            stop: function(event, ui) {          
                item = ui.item;
                var newList = item.closest("ul");
                var group = newList.attr('id');
                var formField = item.find("input");
                formField.val(group);
            },
        });
    });
};

有什么方法可以阻止侧边栏在拖动时展开？感谢您浏览这个烂摊子!

Answer 1

好的，这是一个棘手的问题，但我们可以做一些“破解”。这是一个简单的方法。

为了总结您的问题，您需要在容器中放置可拖动的overflow-y:scroll，同时保持overflow-x:hidden。但是，当您拖动时，该元素仍然散布在容器中，就像 overflow-x 没有效果一样。所以这就是我们所做的:

1) 我们描述了 DOM 上的 overflow-y:scroll 属性:

$(document).ready(function(){
  $('.sidebar').css('overflow','scroll');
});

我们不能将它直接放在 CSS 上，因为我们稍后会更改该值，CSS 默认属性会覆盖它。

2)

$('.panel-body').mousedown(function(){
  $('.sidebar').css('overflow-y','');
}); 

这意味着，当我们选择一个可拖动元素时(当鼠标仍处于按下状态时)，我们将隐藏垂直滚动，这意味着 overflow 都不会成立。这是重要的部分，我们知道删除 overflow-y 可以完全解决问题，但我们需要一个垂直滚动条。所以我们只在选择元素时隐藏它。

3)

$('.panel-body').mouseup(function(){
  $('.sidebar').css('overflow-y','scroll');
});

一旦我们将可拖动元素放在我们想要的位置，我们就把垂直滚动条放回去。

就是这样，这可能不是一个顺利的解决方案，因为它只是一种解决方法。

你可以在这里看看它是如何工作的:

DEMO (已更新)