Question

我正在尝试在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':''})
    }
});

有什么建议吗？谢谢，

Answer 1

您可以通过迭代sortable中的所有项目来获取'id' , 'index'可排序地图，

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

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

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

查看示例here

至于此，

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

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

jquery .sortable（）on <div>存储和检索</div>

1 个答案:

查看示例here