Question

我有一些引导HTML，有两行。

在第一行，不同列中有两个div，这些div是可排序的，可以正常工作。

问题是我无法将第2行与第1行排序。换句话说，我需要一种方法来使行1和2内的div可以在彼此之间进行排序。（将div从第1行拖到第2行）

你可以看到1和2是可排序的，但在这个jsfiddle中没有其他的（3和4）：http://jsfiddle.net/CsFpn/3/

<div class="row">
    <div id="sortable">
        <div class="col-md-6">
            <div class="c1" id="c1">1</div>
        </div>

        <div class="col-md-6">
            <div class="c2" id="c2">2</div>
        </div>
    </div>
</div>

<div class="row">
    <div id="sortable">
        <div class="col-md-6">
            <div class="c3" id="c3">3</div>
        </div>

        <div class="col-md-6">
            <div class="c4" id="c4">4</div>
        </div>
    </div>
</div>

Answer 1

您必须在容器元素上调用.sortable()（在您的示例中不是这样），并将items选项设置为.col-md-6。

如果在排序期间发生change，则必须使用change事件重新排列行之间的元素。

使用你的标记将是：

（我已将两个id="sortable"更改为class="sortable"）

<script>
    $(function() {
        $('.container').sortable({
            items: '.col-md-6',
            change: function(e, ui) {
                // Rearrange your columns between rows here
            }
        });
    });
</script>

<div class="container">
    <div class="row">
        <div class="sortable">
            <div class="col-md-6">
                <div class="c1" id="c1">1</div>
            </div>

            <div class="col-md-6">
                <div class="c2" id="c2">2</div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="sortable">
            <div class="col-md-6">
                <div class="c3" id="c3">3</div>
            </div>

            <div class="col-md-6">
                <div class="c4" id="c4">4</div>
            </div>
        </div>
    </div>
</div>

Answer 2

您的代码存在一些问题。首先，HTML ID必须是唯一的。其次，您需要将可排序的数据连接在一起，如this jQuery sortable example。

所示

我分叉你的jsfiddle来演示如何让它工作：http://jsfiddle.net/puh2r3vn/

<强> HTML：

<div class="row">
    <div id="sortable1" class="connectedSortable">
        <div class="col-md-6">
            <div class="c1" id="c1">1</div>
        </div>
        <div class="col-md-6">
            <div class="c2" id="c2">2</div>
        </div>
    </div>
</div>
<div class="row">
    <div id="sortable2" class="connectedSortable">
        <div class="col-md-6">
            <div class="c3" id="c3">3</div>
        </div>
        <div class="col-md-6">
            <div class="c4" id="c4">4</div>
        </div>
    </div>
</div>

<强> JavaScript的：

$(function () {
    $("#sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable"
    }).disableSelection();
});

JQuery可在Bootstrap行上排序

2 个答案: