Question

我实际上编写了一个仪表板页面，其中包含一些我想要排序的小部件。该页面的主要结构基于Twitter Bootstrap 3.0。有趣的部分如下：

    <div class="row fluid">
    <!-- Column 1 -->
    <div class="span6 sortable">
        <div class="span12">
            Widget 1
        </div>

        <div class="span12">
            Widget 2
        </div>

        <div class="span12">
            Widget 3
        </div>
    </div>
    <!-- Column 2 -->
    <div class="span6 sortable">
        <div class="span12">
            Widget 4
        </div>

        <div class="span12">
            Widget 5
        </div>

        <div class="span12">
            Widget 6
        </div>
    </div>
    </div>

JS代码如下：

$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();

我的问题是我可以在同一列中对窗口小部件进行排序，但我无法从一列到另一列进行排序。

有什么想法吗？

Answer 1

您需要使用 connectWith 参数。看看这个例子：http://jqueryui.com/sortable/#portlets

所以这就是你所需要的：

$(".sortable").sortable({connectWith: ".sortable"}).disableSelection();

这是针对您的特定情况的工作jsFiddle：http://jsfiddle.net/SvxGb/

可以使用Bootstrap和2行流体色谱柱进行分类

1 个答案: