The rowreorder extension seems to be the closest match to my desired function, but i will probably have to modify it to snap on other rows instead of the space between.

Any idea where to start with this?

In this example, I have set up DataTables with RowReorder and RowGroup. Additionally, there is a script that modifies the group (column "category") of a row where "commentaire" is set to "Oui" if it is dragged and dropped into another category.

However, there is a problem: when I drag and drop this row (or any other row from category 2, although there is no reason to because I don't want to change the category), the row {"11, category 1, no, Boat"} becomes {"3, category 1, no, Boat"}, thus changing the order... Why is this happening?

Thank you in advance for your help/answer,
Mathieu.

As i can't submit a test case with editor, i will try to explain you my problem, but first i know there is some exemple like there (https://editor.datatables.net/examples/extensions/rowReorder) but it's done with ajax and i try to do it without ajax as you can see bellow.

I have set up a table with Datatable editor and RowReorder like this :

// start: Editor
var editor = new DataTable.Editor({
    idSrc: "Ordre",
    fields: [
        {
            "label": "Article",
            "name": "Article"
        },
        {
            "label": "Désignation",
            "name": "Désignation"
        },
        {
            "label": "Quantité",
            "name": "Quantité"
        },
        {
            "label": "Montant",
            "name": "Montant"
        }
    ],
    table: "#TableCreateDevis"
});
// end: Editor

var data = [
    {
      "Ordre": 1,
      "Article": "Article",
      "Désignation": 'velo',
      "Quantité": 1,
      "Montant": '1000'
    },
    {
        "Ordre": 2,
        "Article": "Article",
        "Désignation": 'voiture',
        "Quantité": 1,
        "Montant": '3000'
    },
    {
        "Ordre": 3,
        "Article": "Article",
        "Désignation": 'camion',
        "Quantité": 1,
        "Montant": '6000'
    },
    {
        "Ordre": 4,
        "Article": "Débours",
        "Désignation": 'avion',
        "Quantité": 1,
        "Montant": '15000'
    },
];

// start: Datatable
var table = new DataTable("#TableCreateDevis", {

    data:data,

    language: {
        url: staticUrl,
        emptyTable: 'Devis vide'

    },

    buttons: [
        {
            extend: 'remove',
            className: "w-100 h-100 p-3",
            editor: editor,
            formMessage: function (e, dt) {
                var rows = dt
                    .rows(e.modifier())
                    .data()
                    .pluck('Désignation');
                return (
                    'Êtes-vous sûr de vouloir supprimer la ligne "'+rows.join() +'"'
                );
            }
        }   
    ],

    columns: [

            { data: "Ordre", name:"Ordre", className: 'reorder', width: '10%'

            },
            { data: "Article", name:"Article", visible: false,
                render: function (data, type){
                    if (data == null) {
                        return "";
                    }
                return data;    
                },
            },
            { data: "Désignation", name:"Désignation", className: 'editable', width: '60%',
                render: function (data, type){
                    if (data == null) {
                        return "";
                    }
                return data;    
                },
            },
            { data: "Quantité", name:"Quantité", className: 'editable', width: '10%',
                Render: function (data, type){
                    if (data == null) {
                        return "";
                    }
                return data;    
                },
            },
            { data: "Montant", name:"Montant", className: 'editable', 
                Render: function (data, type){
                    if (data == null) {
                        return "";
                    }
                return data;    
                },
            },

    ],

    columnDefs:[{
        className: "dt-center", targets: "_all",
    },],

    dom: "Brtp",
    select: true,
    processing: true,
    deferRender: true,
    scrollX: true,
    pageResize: true,

    rowReorder: {
        dataSrc: 'Ordre'
    },

});
// end: Datatable

Everything work fine, i can change the order of my column when i drag and drop with the first column (the Row Order update correctly) but when i delete a Row, the Row Order doesn't update ( for exemple, i delete the row 2, the number 3 and 4 doesn't update to 2 and 3).

Can you help me pls ? Thank for you time / answer !

I cannot move the rows. The 4 arrow cursor appears, but it looks as if a selection is made of a number of columns in the direction where I'm moving.

$regelsTabel.DataTable({
              ajax: inkoopfactuurRegelUrl,
              order: [[1, 'asc']],
              dom: 'Bfrtip',
              display: 'bootstrap',
              responsive: true,
             columns: [
                  {
                      targets: 0,
                      data: null,
                      defaultContent: '',
                      className: 'select-checkbox',
                  },
                  {
                      data: 'regelnr', className: 'reorder'
                  },
                  {
                      data: 'referentienummer',
                      className: 'select2 editable',
                      sClass: 'editable',
                      render: function (data) {
                          return data
                      }
                  }
                 ... other fields
              ],
              keys: {
                  columns: ':not(:first-child), 2',
                  editor: editor
              }
              ,
              select:
                  {
                      style: 'os',
                      selector: 'td:first-child'
                  }
              ,
              buttons: [
                  {
                      extend: "createInline",
                      editor: editor
                  },
                  {extend: "edit", editor: editor},
                  {extend: "remove", editor: editor}
              ],
              columnDefs: [
                  {
                      orderable: true, className: 'reorder', targets: 1
                  }, {
                      orderable: false,
                      targets: '_all'
                  }
              ],
              rowreOrder:
                  {
                      {#selector: 'td:nth-child(2)',#}
                      dataSrc: 'regelnr',
                      editor: editor
                  },

I use the following stuff:
bootstrap 5, dataTables, Editor (licensed), autoFill, Buttons, colReorder, DataTime, FixedColumns, FixedHeader, KeyTable, Responsive, Rowgroup, RowReorder, Scroller, SearchBuilder, SearchPanes, and Select.

I ran out of ideas to fix this problem.

Thanks in advance.
Henk

**    $('#export').DataTable( {
        //scrollY: 600,
        //paging: false,
        dom:"iptlf",
        "pageLength": 100,
        buttons: ['copy', 
        {
            extend: 'excelHtml5',
            title: "<? echo $header; ?>"
        },
        {
            extend: 'csvHtml5',
            title: "<? echo $header; ?>"
        }, 
            'print', {text: "email",
        action: function (e ,dt, node, config){
          location.href = "javascript:mailPage('inbound.html')";
        }} ],**: 

Hello guys my problem is I have a column in mysql when I get the variables and print with echo its 1 2 3 ... but them in a table its coming with wrong order its must be 1 2 3 ... but its 1 10 9 8 ... anyone can help me ? sorry for bad english:

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

I am trying out the reorder function. See my testcase.

live.datatables.net/betavico/3/edit

I tried to follow the instructions from this example. But I get undefined when executing. What am I missing here? I am trying to have my database updated with the new order.

https://datatables.net/extensions/rowreorder/examples/initialisation/events.html

In order to try this out, I saved the RowReorder "DataTables Scrolling" example locally and edited it to add stateSave: true to the configuration.
When I drag rows around and then reload the page, the order is reset to the default.
Am I doing something wrong?

Thanks!
Tony

Actually i am working on a new project i need to create a table, the first column gets the order number and the second has a button user can reorder the table from it

Dear developers,

Another simple question about the work of DataTables, with which I ask you to help:

I use the example from the link https://editor.datatables.net/examples/advanced/parentChild.html

The example contains the following feature, as a selection by option:

{
     label: "Site:",
     name: "users.site",
     type: "select",
     placeholder: "Select a location"
}

I modified it for myself and it works great

    Editor::inst( $db, 'services', 's_id' )
        ->field(
            Field::inst( 'services.s_id' ),
            Field::inst( 'services.q_id' )->set(Field::SET_CREATE)->setValue('2')->get(false),
            Field::inst( 'services.sg_id' )->options( 'sgroups', 'sg_id', 'sg_n' )->validator( 'Validate::dbValues' ),
            Field::inst( 'sgroups.sg_id' ),
            Field::inst( 'sgroups.q_id' ),
            Field::inst( 'sgroups.sg_n' )
        )
       ->leftJoin( 'sgroups', 'sgroups.sg_id', '=', 'services.sg_id' )
       ->leftJoin( 'queue', 'queue.q_id', '=', 'sgroups.q_id' )
       ->where(function ($q) {

    $q->where( 'sgroups.sg_id',  '2', '=');
    $q->and_where( 'services.sg_id', '17' , '=' );

}

The problem that was clarified is as follows. In my sgroups table, 3 rows belong to one group and the other 3 rows belong to another group. Division occurs by the value of the sgroups.sg_id field. When the Editor displays the table, everything is displayed correctly, taking into account the selections. But when I start adding a new element - it contains not only the first 3 lines, but also the second ones, which is not correct (since the selection is set only on the first 3 lines). This is due to the following code:

Field::inst( 'services.sg_id' )->options( 'sgroups', 'sg_id', 'sg_n' )->validator( 'Validate::dbValues' ),

Which for some reason is not subject to the selection rules:

$q->where( 'sgroups.sg_id',  '2', '=');
$q->and_where( 'services.sg_id', '17' , '=' );

I ask you to suggest:
1. How to select not all values ​​for Options, but with selection by values ​​that are set in where?
2. How can I see the final query that is compiled to execute the DataTables?

Sincerely,
Andrey

I am allowing re-ordering of rows in a table with server side data loading. I noticed that with re-ordering enabled, just a click on a row without a drag triggers re-order event and also leading to ajax requests to the server.

I need a way in which the re-order event will be triggered only when a row has been dragged instead of a click on the row triggering the event. With server side ajax request, this will be undesirable if a click on the row causes data to be reloaded from the database.

Kindly assist.

BUT, more than 3 years have passed since, So I hope this matter has a solution nowadays.

#My use-case:#
**
I have a Datatable that gets real-time updates from a server.
As an update comes to the connected clients the relevant row (and only it** - without refresh the entire table) is updating right in front of the client's eyes.
the code responsible for this magic is this:

**// Variables reference:
**
let tMorning = $('#datatable-morning').DataTable({});

// the crucial code
let row2manipulate = tMorning.row('#row_Id').data();
row2manipulate.rellavantColumn = 'some new data';
tMorning.row('#row_Id').data(row2manipulate).draw();

until here everything works like a charm !!! (thank you for that, datatables.net R&D team!)

**
My actual Issue:
**

after row.data().draw() the table is re-sorts itself.
and this is a functionality I wish to avoid.

needless to state, this is a bad UX for a client.

Thank you so much for any help/suggestion.

Cheers, Yogi.

I have two quick ideas:

1st is to use postCreate and execute custom SQL that is including result from code below and update newly created record:
SELECT IFNULL(MAX(readingOrder)+1, 1) FROM test
But still user needs to enter sth in the filed because RowReorder plugin needs that...
Without that data I am getting
An SQL error occurred: SQLSTATE[HY000]: General error: 1366 Incorrect integer value: '' for column 'readingOrder' at row 1
Maybe setting some default will skip that, but then I need to hide that filed because data will be generic and it will confuse users...

2nd is to use Field Defaults but since it is on JS side, data will be loaded (ajax call? of mentioned select) probably right after the editor window will popup so if 2 users is going to open edit window in the same time, they can finish with same order values
https://editor.datatables.net/examples/simple/fieldDefaults.html

Is there any other more fancy method?

TBH since You have integrated rows order recalculation while deleting some element (except last one) I am surprised that such behavior is not default

Description of problem:

I'm using rowReorder. The table doesn't display in the correct order as indicated by the data within the "order" column. In fact clicking the ^ v arrow in the column heading has no effect when the grip is rendered.

The column configuration is as follows, referencing a function for the rendering

{
  "className": "reorder shrink-to-fit",
  "data": "order",
  "label": "Reorder",
  "name": "order",
  "title": "Reorder",
  "type": "hidden"
  "render": render_grip
}

The function depends on fontawesome

function render_grip() {
    return '<i class="fa fa-grip-horizontal" aria-hidden="true"></i>';
}

If I leave out the "render": render_grip property, the order numbers are shown, the rows sort correctly, the ^ v arrows work, and the rowReorder behavior works properly.

Please if you can help, or give me a framework to create a test case so you can debug, it would be much appreciated.

(for my benefit) https://github.com/louking/members/issues/363#issuecomment-776960529

I tried with my own code (used to work), and with the a couple of examples (including one on your site):

1) http://jsfiddle.net/h4wrmfx3/764/

2) https://editor.datatables.net/examples/extensions/rowReorder.html

This would seem to be a common issue, but didn't see any other recent questions in the Forum about the issue.

I found a way to get rid of the third request by setting drawType: none

       rowReorder: {
            dataSrc: 'sort_order',
            editor: editor,
            formOptions: {
                drawType: 'none'
            }
        },

But how to get rid of the second request? It does not make any sense to pull data from the server after rows are reordered since it won't make any difference.
And is the 2 duplicate GET requests just a bug or there's any sense in that?

Has anyone experienced an issue after changing the order (drag and drop) the AJAX call fails to fire?

I have the correct editor object listed (with the correct AJAX info) and the editor works perfectly when using the form.. The dataSrc is also correct. I am able to perform the drag and drop, but since no data is being sent via AJAX, the order numbers do not change (i.e. number 1 is shown below number 2)

rowReorder: {
            dataSrc: 'view_order',
            editor:  editor_inc_groups,
            selector: 'td:last-child'
        }

Additionally, I tired using submit on the row-reorder event, but still no AJAX call.

table_inc_groups.on( 'row-reorder', function ( e, details, changes ) {
        editor_inc_groups
            .edit( changes.nodes, false, {
                submit: 'changed'
            } )
            .multiSet( changes.dataSrc, changes.values )
            .submit();
    } );

I logged the change data to the console and it is showing correctly, it just will not submit the AJAX call.

Any ideas would be appreciated.

Thanks

Do you have any hints how to update DataTables after we do some manipulation like deleting elements or reordering.
It would be perfect to get same example working on Client side data.

how to do?

Best Regards.

I have the RowReorder plug-in working fine with the Editor. However, I want to confirm the changes before updating the database. I have added a confim in the editor preSubmit event and this works of if I click OK. But if I click cancel the page loses the RowReorder ability i.e. the page no longer allows drag and drop of rows.

Any ideas?

    editor = new $.fn.dataTable.Editor({
        ajax: '/api/admin/getFellowsPrecedence',
        table: '#tblFellowsPrecedenceTable',
        fields: [
            {
                label: 'FellowsPrecedence:',
                name: 'FellowsPrecedence',
                fieldInfo: 'This field can only be edited via click and drag row reordering.'
            },
            {
                label: 'DisplayName:',
                name: 'DisplayName'
            }


        ]
    });

    var fellowsPrecedenceTable = $('#tblFellowsPrecedenceTable').DataTable({
        // rowId: "PersonID",
        "paging": false,
        "ordering": true,
        "searching": false,
        "autoWidth": false,
        rowReorder: {
            selector: 'span.reorder',
            dataSrc: 'FellowsPrecedence',
            editor: editor,
            update: true
        },

        columns: [
            {
                data: null,
                defaultContent: '<span class="reorder"><i class="fa fa-arrows" aria-hidden="true"></i></span>'
            },
            { data: "FellowsPrecedence" },
            { data: "DisplayName" },
            {
                data: "PersonID",
                "render": function (data) {
                    return '<a target="_edit" href=/People/Details/' + data + '>Edit</a>';
                },
                className: "dt-body-center"
            }
        ],
        "order": [[1, 'asc'], [2, 'asc']],
        "columnDefs": [
            { "orderable": false, "targets": [0, 3] }
        ]
    });


    // Event handlers

    editor.on('preSubmit', function () {

        if (!confirm("Save changes!")) {
            return false;
        }
        return true;
    });

    fellowsPrecedenceTable.on('row-reorder', function (e, diff, edit) {

        var result = 'Reorder started on row: ' + edit.triggerRow.data()['DisplayName'] + '<br>';

        for (var i = 0, ien = diff.length; i < ien; i++) {
            var rowData = fellowsPrecedenceTable.row(diff[i].node).data();

            result += rowData['DisplayName'] + ' updated to be in position ' +
                diff[i].newData + ' (was ' + diff[i].oldData + ')<br>';
        }

        $('#result').html('<h3>Event result:</h3><br>' + result);
    });

If that is the case would it be best to create a separate datatable view of just the uploads linked to that item and in that table enable the RowReorder plugin?

I am using a link table for my one-to-many join which currently just has two columns, the file identifier and the identifier of the item the file is linked too. Is the appropriate place for a position column in this link table too? So my link table structure would be; position, file_id, linked_item_id

Any thoughts gratefully received.

Thanks

Chris

TypeError: ctx[0].aoData[this[0]] is undefined jquery.dataTables.js:8025:1
<anonymous>
.../media/js/jquery.dataTables.js:8025:1
methodScoping/<
.../media/js/jquery.dataTables.js:7105:16
update
.../media/Editor/js/dataTables.rowReorder.js:539:20
_mouseUp/<
.../media/Editor/js/dataTables.rowReorder.js:574:6

Parameters for the ajax:
action edit
data[3][SEQUENCE_NO] 4
data[5][SEQUENCE_NO] 3
match ITEM_TARGET%20%3D%20'tractor'

Response looked ok:
{"data":[{"SEQUENCE_NO":"3","ITEM_CODE":"5","ITEM_TARGET":"tractor","ITEM_TYPE":"check","ITEM_TEXT":"check trie tread","ITEM_EXTRA":"tread","CHANGED_DATE":"12\/23 19:50","CHANGED_BY":"duncan"},{"SEQUENCE_NO":"4","ITEM_CODE":"3","ITEM_TARGET":"tractor","ITEM_TYPE":"check","ITEM_TEXT":"Check windshield wiper & washer operation","ITEM_EXTRA":"none","CHANGED_DATE":"12\/23 19:50","CHANGED_BY":"duncan"}]}

Debugger info: http://debug.datatables.net/apaniv

I am using the RowReorder feature in my editor instance. Its basically really working great. I have some short tables with about 20 entries and disabled the paging there for a better usability.
My problem: I have another table with about 400 entries and when I disable the paging the, the reorder feature works really slow, because of the many items. So I have to enable it there. The main problem is to order with drag&drop the rows between the pages then. Is there a good solution to get this work? The same problem is on your example page: https://editor.datatables.net/examples/extensions/rowReorder.html
You cant order from one page to another. One solution would maybe be to enable the order field in editing mode, but it would be easier with drag&drop.

The rowreorder plugin appears to be working fine and I can move rows around, however, nothing happens when I drop the row. I have added the following code to my config:

    table.on('row-reorder', function(e, details, changes) {
      editor.edit(changes.nodes, false, {
        submit: 'changed'
      }).multiSet(changes.dataSrc, changes.values).submit();
    });

and placed an alert() in that block to make sure it is being called on drop...it is, however, I don't see any type of POST action to the urls to update the database like I do in the example. There are no errors in the console either. Here is the complete page code for the table:

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<div class="container" ng-controller="adminReportTypeCtrl">
    <div data-ng-include src="'resources/template/alert.jsp'"></div>
    <div class="block-header">
        <h2>Report Types</h2>
    </div>
    <div class="card">
        <div class="card-body card-padding">
            <div class="text-right m-b-25">
                <button class="btn btn-primary editor_create">
                    <i class="zmdi zmdi-plus"></i> Add a Record
                </button>
            </div>
            <table class="table table-bordered table-striped table-vmiddle datatable">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Description</th>
                        <th>Show In Menu</th>
                        <th></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
  var editor;
  var table;

  $(function() {
    editor = new $.fn.dataTable.Editor({
      ajax: {
        create: {
          type: 'POST',
          url: '<c:url value="/admin/reporttype"/>'
        },
        edit: {
          type: 'PUT',
          url: '<c:url value="/admin/reporttype"/>'
        },
        remove: {
          type: 'DELETE',
          url: '<c:url value="/admin/reporttype"/>'
        }
      },
      table: '.datatable',
      idSrc: 'id',
      fields: [{
        label: 'Sort Order',
        name: 'sortOrder'
      }, {
        label: 'Name',
        name: 'name'
      }, {
        label: 'Description',
        name: 'description'
      }, {
        label: 'Show In Menu',
        name: 'showInMenu'
      }]
    });

    editor.on('open', function(e, type) {
      $('.DTE_Field_Input .DTE_Field_InputControl').addClass('fg-line');
      $('.DTE_Field_Input input').addClass('form-control');
    });

    editor.on('preSubmit', function(e, data, action) {
      if (action !== 'remove') {
        var name = editor.field('name');

        if (!name.val()) {
          name.error('Name is required');
        }

        if (this.inError()) { return false; }
      }
    });

    editor.on('postCreate postRemove', function() {
      table.ajax.reload(null, false);
    }).on('initCreate', function() {
      editor.field('sortOrder').enable();
    }).on('initEdit', function() {
      editor.field('sortOrder').disable();
    });

    // New record
    $('.editor_create').on('click', function(e) {
      e.preventDefault();

      editor.title('<h4>Create new record</h4>').buttons([{
        'label': 'Cancel',
        'className': 'btn-default waves-effect',
        'fn': function() {
          editor.close()
        }
      }, {
        'label': 'Add',
        'className': 'btn-primary waves-effect',
        'fn': function() {
          editor.submit()
        }
      }]).create();
    });

    // Edit record
    $('.datatable').on('click', 'a.editor_edit', function(e) {
      e.preventDefault();

      editor.title('<h4>Edit record</h4>').buttons([{
        'label': 'Cancel',
        'className': 'btn-default waves-effect',
        'fn': function() {
          editor.close()
        }
      }, {
        'label': 'Update',
        'className': 'btn-primary waves-effect',
        'fn': function() {
          editor.submit()
        }
      }]).edit($(this).closest('tr'));
    });

    // Delete a record
    $('.datatable').on(
            'click',
            'a.editor_remove',
            function(e) {
              e.preventDefault();

              editor.title('<h4>Delete record</h4>').message(
                      'Are you sure you wish to remove this record?').buttons(
                      [{
                        'label': 'Cancel',
                        'className': 'btn-default waves-effect',
                        'fn': function() {
                          editor.close()
                        }
                      }, {
                        'label': 'Delete',
                        'className': 'btn-danger waves-effect',
                        'fn': function() {
                          editor.submit()
                        }
                      }]).remove($(this).closest('tr'));
            });

    table = $('.datatable')
            .DataTable(
                    {
                      ajax: '<c:url value="/admin/reporttype"/>',
                      columns: [
                          {
                            data: 'sortOrder',
                            className: 'pl-10 reorder'
                          },
                          {
                            data: 'name',
                            className: 'nowrap'
                          },
                          {
                            data: 'description',
                            width: '100%'
                          },
                          {
                            data: 'showInMenu',
                            className: 'text-center nowrap'
                          },
                          {
                            data: null,
                            className: 'text-right nowrap pr-10',
                            defaultContent: '<a href="" class="editor_edit"><i class="zmdi zmdi-hc-2x zmdi-edit c-gray"></i></a> <a href="" class="editor_remove m-l-10" tooltip-placement="top" tooltip="Delete"><i class="zmdi zmdi-hc-2x zmdi-delete c-gray"></i></a>'
                          }],
                      columnDefs: [
                          {
                            render: function(data, type, row) {
                              return '<span style="display: none;">'
                                      + data
                                      + '</span>'
                                      + '<span><i class="zmdi zmdi-hc-2x zmdi-arrows"></i></span>';
                            },
                            orderable: true,
                            targets: 0
                          }, {
                            orderable: false,
                            targets: '_all'
                          }],
                      oLanguage: {
                        oPaginate: {
                          sNext: '<i class="zmdi zmdi-chevron-right"></i>',
                          sPrevious: '<i class="zmdi zmdi-chevron-left"></i>'
                        }
                      },
                      rowReorder: {
                        dataSrc: 'sortOrder',
                        snapX: 10,
                        editor: editor
                      }
                    });
    table.on('row-reorder', function(e, details, changes) {
      editor.edit(changes.nodes, false, {
        submit: 'changed'
      }).multiSet(changes.dataSrc, changes.values).submit();
    });
  });
</script>

any ideas on what I might be missing would be greatly appreciated. Thanks.

Website : http://xicgl.dige2.net

dataTables.editor.min.js:50 Uncaught TypeError: Cannot read property 'multiSet' of undefined
    at f.multiSet (http://xicgl.dige2.net/admin/libs/datatables/media/js/dataTables.editor.min.js:50:5)
    at j._mouseUp (https://nightly.datatables.net/rowreorder/js/dataTables.rowReorder.min.js:14:177)
    at HTMLDocument.<anonymous> (https://nightly.datatables.net/rowreorder/js/dataTables.rowReorder.min.js:10:420)
    at HTMLDocument.dispatch (http://xicgl.dige2.net/admin/libs/jquery/jquery.min.js:3:6466)
    at HTMLDocument.r.handle (http://xicgl.dige2.net/admin/libs/jquery/jquery.min.js:3:3241)

http://debug.datatables.net/ozukep

"System menu" row re-order has no problem but "Projects" not working.

Login information will send to your pm box.

Thanks a lot.

Is it possible to limit the drop area of specific rows?

For example I have groups of rows and I would like to setup row reordering to allow these rows to be reorderable inside their group only. So if rows 1-3 are in Group A and rows 4-8 are in Group B, I want to prevent the user from being able to drag row #5 into positions 1-3 and vice versa.

I thought maybe I could accomplish this using events but I didn't see an event for mid-drag, only after the drag was completed which seems like it would be very difficult(and not very intuitive for the user) to try and force the boundary there.