<div> 上的 jquery .sortable() 存储和检索答案

【问题标题】：jquery .sortable() on <div> store and retrieve<div> 上的 jquery .sortable() 存储和检索
【发布时间】：2015-01-25 03:01:25
【问题描述】：

我正在尝试在 div 上使用 sortable() 并且它工作正常，但我无法存储排序的 div 并在数据库中为用户检索它们。这是我的代码：

<div class="row">
<div class="col-sm-3 col-xs-6 widget-container-col">
    <div class="widget-box widget-color-blue" id="1">
        <div class="widget-header">
            <h4 class="widget-title">Japanese Yen</h4>
        </div>
        <div class="widget-body">
            <div class="center bold bigger-300"><i class="fa fa-lg fa-jpy smaller-90 up-5"></i> {{ round($currencyWidget['price'], 2) }}</div>
            <div class="center">as of {{ $currencyWidget['date'] }}</div>
        </div>
    </div>
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
    <div class="widget-box widget-color-blue" id="2">
        <div class="widget-header">
            <h4 class="widget-title">Another Widget</h4>
        </div>
        <div class="widget-body">
            <div class="center bold bigger-300">Test Widget</div>
        </div>
    </div>
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
</div>
<div class="col-sm-3 col-xs-6 widget-container-col">
</div>

这是我的 jquery 代码：

$('.widget-container-col').sortable({
    connectWith: '.widget-container-col',
    items: '> .widget-box',
    opacity: 0.8,
    revert: true,
    forceHelperSize: true,
    placeholder: 'widget-placeholder',
    forcePlaceholderSize: true,
    tolerance: 'pointer',
    start: function(event, ui){
        ui.item.parent().css({'min-height': ui.item.height()})
    },
    update: function(event, ui) {
        var data = $(this).sortable('serialize');
        ui.item.parent({'min-height':''})
    }
});

有什么建议吗？谢谢，

【问题讨论】：

你想在数据库中存储 div 的顺序吗？
是的，我需要知道，我怎样才能得到排序后的数据，以便我可以将其 AJAX 到数据库，但我首先如何才能得到排序后的数据。
只需循环遍历 .widget-container-col 元素并获取它们的 id ...？
您不必获取已排序的数据。只需获取元素的索引位置，然后将这些索引值存储在数组中并将其传递给服务器。查看 jquery index()
能否请您给我一个示例，或者解释一下，我在 jquery 和 jquery ui 方面不太好。

标签： javascript jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

您可以通过遍历 sortable 中的所有项目来获取 sortable 的 'id' , 'index' 映射，

$.map($(".widget-container-col > .widget-box "), function(element) {
    return element.id + ' = ' + $(element).index();
});

它将以下列形式返回您的数据，

["2 = 0", "1 = 1"]

看一个例子here

至于这个，

另外，一旦我将数据保存到数据库中，我将如何加载页面从数据库中检索数据后，用户以相同的方式排序存储它。

您应该在从数据库中获取数据时按排序顺序维护数据。

【讨论】：