jQueryのsortableで子階層のソートを別々に動作させるには

###前提・実現したいこと
jQuery.UIを使用したソートについてご教授お願いいたします。

一つの親に対して複数のソート（group1、gorup2毎にソート）を行うことは可能でしょうか。

実現したいことは下記点です。
・group1、group2など指定したCSS間でソートを行う。(group1、group2は交互に設定されることはありません。)
また、変更した位置の保存するため、各ソート毎にIDを取得

・group1とgroup2は表示の際に同様の表示幅が一致するようにしたい。
※widthでpx幅指定等を行わないで一致させたい。
（group1とgroup2で表示列数は同一になるが、表示列数が動的に変わるため幅を固定で定義したくないため）

###試したこと
group1やgroup2を<div>で囲むとソートは行いたいことを満たせますが、幅がgroup1とgroup2で変ってしまう。

何とか、幅を固定で指定せずにソートを行う方法はあるでしょうか。
よろしくお願い致します。

以下、環境
jQuery UI v1.10.3

以下、簡略ソースになります。

<html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <style> <!-- div.group1 { background-color: silver; } div.group2 { background-color: darksalmon; }

        div.cell {
            display: table-cell;
            border: 1px solid;
            margin: 5px;
            padding: 0.5em;
        }
    
    -->  
    </style>
    <script>
        $(function () {
            $('#table1').sortable({
                items: '.ui-state-sort',

                update: function (e, ui) {
                    var param = { sortOrder: $('#table1').sortable('toArray') };
                },
            });

        });
    </script>
</head>
<body>
    <div id="table1" style="display:table; border:1px solid;">
        <div style="display:table-header-group; border:1px solid;">
            <div style="display:table-row">
                <div class="cell">ID</div>
                <div class="cell">Name</div>
                <div class="cell">Price</div>
            </div>
        </div>
        <div id="A1" style="display:table-row-group; border:1px solid; " class="ui-state-sort group1"  data-item="A11">
            <div style="display:table-row">
                <div class="cell">12456</div>
                <div class="cell">あああああ</div>
                <div class="cell">1000</div>
            </div>
            <div style="display:table-row">
                <div class="cell">A12345</div>
                <div class="cell">AB</div>
                <div class="cell">100</div>
            </div>
            <div style="display:table-row">
                <div class="cell"></div>
                <div class="cell">小計</div>
                <div class="cell">1100</div>
            </div>
        </div>
        <div id="A2" style="display:table-row-group;  border:1px solid;" class="ui-state-sort group1" data-item="A21">
            <div style="display:table-row">
                <div class="cell">2345678</div>
                <div class="cell">いいいいい</div>
                <div class="cell">50000</div>
            </div>
            <div style="display:table-row">
                <div class="cell"></div>
                <div class="cell">小計</div>
                <div class="cell">50000</div>
            </div>
        </div>
        <div id="B1" style="display:table-row-group;  border:1px solid;" class="ui-state-sort group2" data-item="B11">
            <div style="display:table-row">
                <div class="cell">A2345</div>
                <div class="cell">BC</div>
                <div class="cell">100</div>
            </div>
            <div style="display:table-row">
                <div class="cell"></div>
                <div class="cell">小計</div>
                <div class="cell">1100</div>
            </div>
        </div>
        <div id="B2" style="display:table-row-group;  border:1px solid;" class="ui-state-sort group2" data-item="B12">
            <div style="display:table-row;">
                <div class="cell">A333333</div>
                <div class="cell">CC</div>
                <div class="cell">500</div>
            </div>
            <div style="display:table-row">
                <div class="cell"></div>
                <div class="cell">小計</div>
                <div class="cell">500</div>
            </div>
        </div>
        <div style="display:table-footer-group;">
            <div style="display:table-row;">
                <div class="cell"></div>
                <div class="cell">合計</div>
                <div class="cell">52700</div>
            </div>
        </div>
    </div>
</body>

</html>

行動規範の内容に同意します

回答1件

自己解決

閲覧していただき，ありがとうございます。
ソートを複数持たせる方法を諦め、updateで判断するようにしました。

        div.cell {
            display: table-cell;
            border: 1px solid;
            margin: 5px;
            padding: 0.5em;
        }
    
    -->  
    </style>
    <script>
        $(function () {
            $('#table1').sortable({
                //items: '.group1,.group2',
                items: '.ui-state-sort',
                update: function (e, ui) {
                    var dataItem = ui.item.context.getAttribute("data-item");
                    var prevdataItem = ui.item.prev().attr("data-item");
                    var nextdataItem = ui.item.next().attr("data-item");
                    var idList = $('#table1').sortable('toArray');
                    var arrayList = [];

                    if (dataItem == "ItemA")
                    {
                        if (dataItem == prevdataItem || dataItem == nextdataItem || prevdataItem == undefined)
                        {
                            for (var i = 0; i < idList.length; i++)
                            {
                                if ($('#' + idList[i]).attr("data-item") == "ItemA"){
                                    arrayList.push(idList[i]);
                                }
                            }

                            var param = { sortOrder: arrayList, sort: $('.sortParent').sortable('toArray') };
                        }
                        else
                        {
                            return false;
                        }
                    }
                    else if (dataItem == "ItemB")
                    {
                        if (dataItem == prevdataItem || dataItem == nextdataItem || nextdataItem == undefined) {
                            for (var i = 0; i < idList.length; i++) {
                                if ($('#' + idList[i]).attr("data-item") == "ItemB") {
                                    arrayList.push(idList[i]);
                                }
                            }
                            var param = { sortOrder: arrayList, sort: $('.sortParent').sortable('toArray') };
                        }
                        else
                        {
                            return false;
                        }
                    }
                    else
                    {
                        return false;
                    }
                },
            });
        });
    </script>
</head>
<body>
    <div id="table1" style="display:table; border:1px solid;" class="sortParent">
        <div style="display:table-header-group; border:1px solid;">
            <div style="display:table-row">
                <div class="cell">ID</div>
                <div class="cell">Name</div>
                <div class="cell">Price</div>
            </div>
        </div>
        <div id="A1" style="display:table-row-group; border:1px solid; " class="ui-state-sort group1"  data-item="ItemA">
            <div style="display:table-row">
                <div class="cell">12456</div>
                <div class="cell">あああああ</div>
                <div class="cell">1000</div>
            </div>
            <div style="display:table-row">
                <div class="cell">A12345</div>
                <div class="cell">AB</div>
                <div class="cell">100</div>
            </div>
            <div style="display:table-row">
                <div class="cell"></div>
                <div class="cell">小計</div>
                <div class="cell">1100</div>
            </div>
        </div>
        <div id="A2" style="display:table-row-group;  border:1px solid;" class="ui-state-sort group1" data-item="ItemA">
            <div style="display:table-row">
                <div class="cell">2345678</div>
                <div class="cell">いいいいい</div>
                <div class="cell">50000</div>
            </div>
            <div style="display:table-row">
                <div class="cell"></div>
                <div class="cell">小計</div>
                <div class="cell">50000</div>
            </div>
        </div>
        <div id="B1" style="display:table-row-group;  border:1px solid;" class="ui-state-sort group2" data-item="ItemB">
            <div style="display:table-row">
                <div class="cell">A2345</div>
                <div class="cell">BC</div>
                <div class="cell">100</div>
            </div>
            <div style="display:table-row">
                <div class="cell"></div>
                <div class="cell">小計</div>
                <div class="cell">1100</div>
            </div>
        </div>
        <div id="B2" style="display:table-row-group;  border:1px solid;" class="ui-state-sort group2" data-item="ItemB">
            <div style="display:table-row;">
                <div class="cell">A333333</div>
                <div class="cell">CC</div>
                <div class="cell">500</div>
            </div>
            <div style="display:table-row">
                <div class="cell"></div>
                <div class="cell">小計</div>
                <div class="cell">500</div>
            </div>
        </div>
        <div style="display:table-footer-group;">
            <div style="display:table-row;">
                <div class="cell"></div>
                <div class="cell">合計</div>
                <div class="cell">52700</div>
            </div>
        </div>
    </div>
</body>

</html>

また、分からないことがありましたら、よろしくお願いいたします。

投稿2017/12/18 09:21

kagura_chi

総合スコア6