Html 引导3-使用垂直滚动条水平拖动元素，溢出-y：滚动

在我没有成功使用my之后，我按照一个建议使用Bootstrap的仪表板示例作为基础，不幸的是没有成功

目标是一个带有侧栏（col-md-3）的页面，其中包含所有未排序学生的面板（每个小面板），以及一个包含不同组（较大面板）的主区域（col-md-9），其中学生可以使用JQeryUI Sortable进行拖放

这很好，除了一个问题：虽然侧边栏没有水平滚动条（即使在选择“overflow-x:auto”时），但当尝试从中拖出面板时，侧边栏似乎变大了

以下是代码的简化版本：

CSS:

---

有没有一种方法可以阻止侧边栏在拖动时展开？谢谢你看完这堆乱七八糟的东西

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

要总结您的问题，您需要将

overflow-y:scroll

放在存放可拖动文件的容器中，同时保持

overflow-x:hidden

。但是，当您拖动时，元素仍然在容器中扩散，就像

overflow-x

没有效果一样。下面是我们要做的：

1） 我们描述DOM上的

overflow-y:scroll

属性：

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

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

(二)

这意味着，当我们选择一个可拖动的元素时（当鼠标仍然向下时），我们将隐藏垂直滚动，这意味着

溢出

都不会为真。这是重要的一部分，我们知道删除

overflow-y

完全解决了这个问题，但我们需要一个垂直滚动条。因此，我们仅在选择元素时隐藏它

(三)

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

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

您可以在此处查看它的工作原理：

---

（更新）

您是否也可以粘贴面板javascript代码？现在已添加。不过，拖动、排序等操作确实可以完美地工作。谢谢你的调查

overflow-x:auto

确实似乎是个问题，因为它是

auto

，在拖动时会创建滚动条，我们可以尝试更改

z-index

以防止出现这种情况，但我只是好奇为什么您需要

overflow

属性？因为您已经在使用网格。您是对的-overflow-x:auto仅用于测试目的。我在上面的代码中将其更改为overflow-y:auto，如原始示例中所示。但这并不能解决问题。当我取出overflow-y:auto时，问题就消失了，但是我不能再滚动侧边栏了（这很重要）。有没有其他方法允许滚动？非常感谢-这解决了它！这个答案中唯一的问题是你写了“overflow:scroll”，应该是“overflow-y:scroll”。在演示中它是正确的。再次感谢！再次您好，@ICanHasKittenz-不幸的是，这个解决方案仍然有一个问题，我第一次没有看到。您可以通过在侧边栏中添加更多的学生面板，向下滚动一点并尝试抓住下面的人来重现错误。当javascript删除滚动条时，侧边栏将跳到顶部，使鼠标光标远高于拖动的对象。@Tobi你说得对。我现在做了一些更改，特别是

.sidebar

有

溢出：隐藏

使垂直滚动位置保持不变，并使用helper方法克隆拖动的元素（否则拖动时它会出现在其他容器后面）。还修复了不能拖动空组的错误。请看一下更新的演示。

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

$(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);
            },
        });
    });
};

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

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

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