问题描述
在我的，我按照一个建议，并使用Bootstrap的仪表板示例作为基础，不幸的是没有成功。
After my lack of success with my previous post, I followed a suggestion and used Bootstrap's Dashboard example as a base, unfortunately with no success.
目标是一个页面的边栏（col-md-3 ），其中包含所有未排序的学生（每个小的面板）的面板，以及包含不同组（较大面板）的主区域（col-md-9），可以使用JQeryUI Sortable拖放学生。
The aim is a page with a sidebar (col-md-3) that contains panels with all unsorted students (in small panels each), and a main area (col-md-9) that contains different groups (larger panels), in which the students can be dragged and dropped with JQeryUI Sortable. This screenshot shows the concept.
这工作正常，除了一个问题：虽然边栏没有水平滚动条（即使选择overflow-x：auto），似乎变得更大，当试图从其中拖出面板。
This works fine, except for one problem: while the sidebar does not have a horizontal scrollbar (even when selecting "overflow-x: auto"), it seems to become bigger when trying to drag a panel out from it. This screenshot at the moment when I am dragging the fourt panel from above shows the problem.
以下是代码的简化版本：
Here is a streamlined version of the code:
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代码：
The (functioning and simplified) Javascript code:
$(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);
},
});
});
};
有什么方法可以阻止侧边栏在拖动时展开？感谢您查看此错误！
Is there a way I can stop the sidebar from expanding when dragging? Thanks for looking through this mess!
推荐答案
，这是一个棘手的问题，但我们可以做一点点黑客，这是一个简单的方法。
Ok, this is a tricky problem but there's a little bit of 'hack' that we can do. It's a simple method.
要总结你的问题，你需要 overflow-y：scroll 在你的容器中保存draggable，而你保留 overflow-x：hidden 。但是，当你拖动时，元素仍然在整个容器中传播，好像 overflow-x 没有效果。所以我们这样做：
To summarize your issue, you need overflow-y:scroll in your container holding the draggable, while you keep overflow-x:hidden. But, when you drag, the element still spreads across the container like as if the overflow-x had no effect. So here's what we do:
1）我们描述DOM上的 overflow-y：scroll p>
1) We describe the overflow-y:scroll property on DOM:
$(document).ready(function(){
$('.sidebar').css('overflow','scroll');
});
我们不能将它直接放在CSS上，因为我们将在以后更改此值CSS默认属性覆盖它。
We can't put this directly on the CSS because we are going to be changing this value later and the CSS default property overrides it.
2）
$('.panel-body').mousedown(function(){
$('.sidebar').css('overflow-y','');
});
这意味着，当我们选择一个可拖动的元素垂直滚动，这意味着 overflow 将不会是真的。这是重要的部分，我们知道删除 overflow-y 完全解决了这个问题，但是我们需要一个垂直的滚动条。
This means, when we select a draggable element (while the mouse is still down), we will hide the vertical scroll, that means both overflow won't be true. This is the important part, we know that removing overflow-y totally solves the issue but we need a vertical scrollbar. So we hide it only when an element is selected.
3）
$('.panel-body').mouseup(function(){
$('.sidebar').css('overflow-y','scroll');
});
一旦我们将draggable元素放置在我们想要的位置，
Once we have placed the draggable element in the place we wanted it to be, we put our vertical-scrollbar back.
这是一个平滑的解决方案，因为它只是一个解决方法。
That's it, this may not be a smooth solution since it's only a workaround.
可以在这里查看它的工作原理：
You can have a look at how it works here:
（已更新）
这篇关于引导3 - 拖动元素水平与垂直滚动条，溢出y：滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！