Jquery Datatable drag and drop with row grouping

I have used jquery dataTable and I have a requirement as below:

• If I drag the row (- BRAND NAME:....) then it should drag between rows only and with all it's content.
• If I drag content of the row group then it should not overlap with other group.

Here is what I have done so far:

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>

Jquery:

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();

Link of Jsfiddle: DEMO

from Jquery Datatable drag and drop with row grouping