Bootstrap 3-使用垂直滾動條水平拖動元素，溢出-y：滾動

Question

在我以前的文章中缺乏成功之后 ，我遵循了一個建議，並以Bootstrap的Dashboard示例為基礎，不幸的是沒有成功。

目的是在一個帶有側邊欄（col-md-3）的頁面中包含所有未排序學生的面板（每個面板為小面板），以及一個主要區域（col-md-9），其中包含不同的組（較大面板）。可以使用JQeryUI Sortable拖放學生。 此屏幕快照顯示了該概念。

除一個問題外，此方法工作正常：側邊欄沒有水平滾動條（即使選擇“ overflow-x：auto”時），但嘗試將面板拖出時似乎變大了。 當我從上方拖動fourt面板時，此屏幕快照顯示了問題。

這是代碼的簡化版本：

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 default屬性將覆蓋它。

2）

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

這意味着，當我們選擇一個可拖動元素（當鼠標仍處於按下狀態）時，我們將隱藏垂直滾動，這意味着兩個overflow都不是正確的。 這是重要的部分，我們知道消除overflow-y完全解決問題，但是我們需要一個垂直滾動條。 因此我們僅在選擇元素時將其隱藏。

3）

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

將可拖動元素放置在我們想要的位置后，我們將垂直滾動條放回原處。

就是這樣，這可能不是一個平滑的解決方案，因為它只是一種解決方法。

您可以在這里查看其工作方式：

演示 （ 已更新 ）