设想:
我正在尝试创建一个仪表板,其中包含不同大小的小部件。我希望用户能够根据自己的喜好安排他们的小部件。
我一直在尝试使用portlet示例来实现 jQuery UI 的可排序交互,但我遇到了一些麻烦。
什么工作:
我可以在同一行内的列之间拖放/重新排列容器。
什么不工作:
我无法在行之间拖动容器。我的问题:
如何启用行和列之间的拖放?jsFiddle 演示:
http://jsfiddle.net/SHUTR/相关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();