2

设想:

我正在尝试创建一个仪表板,其中包含不同大小的小部件。我希望用户能够根据自己的喜好安排他们的小部件。

我一直在尝试使用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();
4

1 回答 1

5

我相信问题出在 CSS 上。当您将以下行添加到您的 .js 时,它将起作用:

$(".column").addClass("ui-helper-clearfix");

从文档中:

.ui-helper-clearfix:将浮动包装属性应用于父元素

http://wiki.jqueryui.com/w/page/12137970/jQuery%20UI%20CSS%20Framework

于 2013-06-20T18:48:22.447 回答