Fixed draggable rows

src/components/datatable/DataTable.vue

@@ -29,7 +29,8 @@
                         @column-resizestart="onColumnResizeStart($event)" @checkbox-change="toggleRowsWithCheckbox($event)" />
                 <DTTableBody :value="dataToRender" :columns="columns" :empty="empty" :dataKey="dataKey" :selection="selection" :selectionKeys="d_selectionKeys" :selectionMode="selectionMode"
                     :rowGroupMode="rowGroupMode" :groupRowsBy="groupRowsBy" :expandableRowGroups="expandableRowGroups" :rowClass="rowClass" :editMode="editMode" :compareSelectionBy="compareSelectionBy"
-                    :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowGroups="expandedRowGroups"
+                    :expandedRowIcon="expandedRowIcon" :collapsedRowIcon="collapsedRowIcon" :expandedRows="expandedRows" :expandedRowKeys="d_expandedRowKeys" :expandedRowGroups="expandedRowGroups"
+                    :editingRows="editingRows" :editingRowKeys="d_editingRowKeys"
                     @rowgroup-toggle="toggleRowGroup" @row-click="onRowClick($event)" @row-touchend="onRowTouchEnd" @row-keydown="onRowKeyDown"
                     @row-mousedown="onRowMouseDown" @row-dragstart="onRowDragStart($event)" @row-dragover="onRowDragOver($event)" @row-dragleave="onRowDragLeave($event)" @row-dragend="onRowDragEnd($event)" @row-drop="onRowDrop($event)"
                     @row-toggle="toggleRow($event)" @radio-change="toggleRowWithRadio($event)" @checkbox-change="toggleRowWithCheckbox($event)"
@@ -1090,14 +1091,14 @@ export default {
         },
         onRowDragStart(e) {
             const event = e.originalEvent;
-            const index = e.rowIndex;
+            const index = e.index;
             this.rowDragging = true;
             this.draggedRowIndex = index;
             event.dataTransfer.setData('text', 'b');    // For firefox
         },
         onRowDragOver(e) {
             const event = e.originalEvent;
-            const index = e.rowIndex;
+            const index = e.index;
 
             if (this.rowDragging && this.draggedRowIndex !== index) {
                 let rowElement = event.currentTarget;

src/components/datatable/TableBody.vue

@@ -16,10 +16,10 @@
                     @mousedown="onRowMouseDown($event)" @dragstart="onRowDragStart($event, index)" @dragover="onRowDragOver($event,index)" @dragleave="onRowDragLeave($event)" @dragend="onRowDragEnd($event)" @drop="onRowDrop($event)">
                     <template v-for="(col,i) of columns">
                         <DTBodyCell v-if="shouldRenderBodyCell(value, col, index)" :key="col.columnKey||col.field||i" :rowData="rowData" :column="col" :index="index" :selected="isSelected(rowData)"
-                            :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null" @row-toggle="onRowToggle($event)"
+                            :rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null"
-                            @radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)"
                             :rowspan="rowGroupMode === 'rowspan' ? calculateRowGroupSize(value, col, index) : null"
                             :editMode="editMode" :editing="editMode === 'row' && isRowEditing(rowData)"
+                            @radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)" @row-toggle="onRowToggle($event)"
                             @cell-edit-init="onCellEditInit($event)" @cell-edit-complete="onCellEditComplete($event)" @cell-edit-cancel="onCellEditCancel($event)"
                             @row-edit-init="onRowEditInit($event)" @row-edit-save="onRowEditSave($event)" @row-edit-cancel="onRowEditCancel($event)"/>
                     </template>
@@ -93,6 +93,10 @@ export default {
             type: Array,
             default: null
         },
+        expandedRowKeys: {
+            type: null,
+            default: null
+        },
         selection: {
             type: [Array,Object],
             default: null
@@ -116,6 +120,14 @@ export default {
         compareSelectionBy: {
             type: String,
             default: 'deepEquals'
+        },
+        editingRows: {
+            type: Array,
+            default: null
+        },
+        editingRowKeys: {
+            type: null,
+            default: null
         }
     },
     methods: {
@@ -238,7 +250,7 @@ export default {
         isRowEditing(rowData) {
             if (rowData && this.editingRows) {
                 if (this.dataKey)
-                    return this.d_editingRowKeys ? this.d_editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
+                    return this.editingRowKeys ? this.editingRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
                 else
                     return this.findIndex(rowData, this.editingRows) > -1;
             }
@@ -248,7 +260,7 @@ export default {
         isRowExpanded(rowData) {
             if (rowData && this.expandedRows) {
                 if (this.dataKey)
-                    return this.d_expandedRowKeys ? this.d_expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
+                    return this.expandedRowKeys ? this.expandedRowKeys[ObjectUtils.resolveFieldData(rowData, this.dataKey)] !== undefined : false;
                 else
                     return this.findIndex(rowData, this.expandedRows) > -1;
             }