在我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);
},
});
});
};
有没有办法可以在拖动时阻止侧边栏扩展?感谢您浏览这个烂摊子!
答案 0 :(得分:2)
好的,这是一个棘手的问题,但我们可以做一些'黑客攻击'。这是一个简单的方法。
总结一下您的问题,您需要在容器中使用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 (已更新)