场景:
我正在尝试创建一个仪表板,其中包含不同大小的小部件。我希望用户能够根据自己的喜好排列他们的小部件。
我一直在尝试使用 portlets 来实现 jQuery UI 的可排序交互。 例如,但我遇到了一些麻烦。
有效方法:
我可以在同一行内的列之间拖放/重新排列容器。
什么不起作用:
我无法在行之间拖动容器。我的问题:
如何在行和列之间启用拖/放?jsFiddle 演示:
http://jsfiddle.net/SWUTR/相关 HTML:
<div class="column">
<div class="container span2"></div>
<div class="container span2"></div>
</div>
<div class="column">
<div class="container span1"></div>
<div class="container span2"></div>
<div class="container span1"></div>
</div>
<div class="column">
<div class="container span4"></div>
</div>
相关CSS:
.column .container {
float:left;
margin:5px;
min-width:100px;
height:250px;
background:#39F;
}
.column .container.span1 {
width:calc(25% - 10px);
background:#6CC;
}
.column .container.span2 {
width:calc(50% - 10px);
background:#6F6;
}
.column .container.span3 {
width:calc(75% - 10px);
background:#99C;
}
.column .container.span4 {
width:calc(100% - 10px);
background:#33C;
}
相关 jQuery:
$(".column").sortable({
connectWith: ".column"
});
$(".column").disableSelection();
最佳答案
我认为问题出在 CSS 上。 当您将以下行添加到 .js 时它将起作用:
$(".column").addClass("ui-helper-clearfix");
来自文档:
.ui-helper-clearfix: Applies float wrapping properties to parent elements
http://wiki.jqueryui.com/w/page/12137970/jQuery%20UI%20CSS%20Framework
关于javascript - jQuery 可排序(拖放)仪表板容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17217280/