带有行分组的 Jquery 数据表拖放

Question

我使用过 jquery dataTable 并且我有如下要求：

• 如果我拖动行 ( - BRAND NAME:....) 那么它应该只在行之间拖动并且包含它的所有内容。

• 如果我拖动行组的内容，则它不应与其他组重叠。

这是我到目前为止所做的：

HTML：

<table id="example">

    <thead>

        <tr>

            <th>Name</th>

            <th>type</th>

            <th>age</th>

        </tr>

    </thead>

    <tbody id="sortable">

<tr id="1">

    <td>Name</td>

    <td>Type1</td>

    <td>Age</td>

</tr>        

<tr id="2">

    <td>Name</td>

    <td>Type1</td>

    <td>Age</td>

</tr>        

<tr id="3">

    <td>Name</td>

    <td>Type2</td>

    <td>Age</td>

</tr>        

<tr id="4">

    <td>Name</td>

    <td>Type2</td>

    <td>Age</td>

</tr> 

    </tbody>

</table>

查询：

var table = $('#example').DataTable({

"searching": false,

            "paging": false,

            "info": false,

            "order": [[0, "asc"]],

            drawCallback: function (settings) {

                var api = this.api();

                var rows = api.rows({ page: 'current' }).nodes();

                var last = null;

                api.column(1, { page: 'current' }).data().each(function (group, i) {

                    if (last !== group) {

                        $(rows).eq(i).before(

                            '<tr class="groups"><td class="tdgroups" colspan="22" style="Cursor:hand !important;BACKGROUND-COLOR:rgb(237, 208, 0);font-weight:700;color:#006232;">' + '- BRAND NAME: ' + group + '</td></tr>'

                        );

                        last = group;

                    }

                });

            }

});

$("#sortable").sortable();

$("#sortable").disableSelection();