jquery .sortable() on <div> store and retrieve

本文关键字：div gt store retrieve and lt sortable on jquery 更新时间：2023-09-26

存储和检索。

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

有什么建议吗？谢谢

您可以通过

遍历可排序中的所有项目来获取可排序的'id' , 'index'映射，

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

这将以以下形式返回数据，

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

在此处查看示例

至于这个，

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

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