顺序子元素的可排序组答案

【问题标题】：Sortable group for order children elements顺序子元素的可排序组
【发布时间】：2017-03-22 12:07:51
【问题描述】：

我有一个带有 products 的 MySQL 表和带有 collections 的其他表。

每个集合都包含一些产品（但某些产品没有集合）。

我将集合 id 存储在产品列中，如下所示：

在管理面板中，我以这种方式显示所有产品：

但现在我需要使它可排序并按集合分组，如下所示：

实际上产品是可排序的（使用 jQuery UI），我将订单存储在数据库中，以便产品按该顺序显示。

如何将每个系列的所有产品分组并重新排序该组，以便产品更改顺序？

MCVE的重排序实际逻辑：https://jsfiddle.net/jimmyadaro/mty2br9n/

【问题讨论】：

有人可以提供帮助吗？ ...

标签： jquery mysql jquery-ui jquery-ui-sortable

【解决方案1】：

你需要像fiddle这样格式化Html：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <!-- CSS library -->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <!-- jQuery library -->
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $(document).ready(function () {

            //Look the EXTERNAL RESOURCES (jquery 2.1.0 and jquery ui 1.11.4)
            $(".container").children('.collection').uniqueId().end().sortable({
                axis: 'y',
                opacity: 0.9,
                revert: true,
                cursor: 'move',
                update: function (event, ui) {
                    var order = $(this).sortable('toArray');
                    $("#log").text(order);
                }
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <div class="collection">
            Fruits
            <ul collection="1">
                <li product="1">Watermelon</li>
                <li product="2">Apple</li>
                <li product="3">Grape</li>
            </ul>
        </div>
        <div class="collection">
            Vegetables
            <ul collection="2">
                <li product="4">Lettuce</li>
                <li product="5">Tomato</li>
                <li product="6">Carrot</li>
            </ul>
        </div>
        <div class="collection">
            Others
            <ul collection="3">
                <li product="7">Bread</li>
                <li product="8">Cake</li>
            </ul>
        </div>


    </div>

    <hr>

    <div id="log"></div>
</body>
</html>

【讨论】：

Up for Fiddle 链接。很好的解释。