jquery - 可使用 Bootstrap 和 2 行流体列进行排序

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/