Fixed draggable rows

pull/104/head
cagataycivici 2019-11-18 15:09:29 +03:00
parent 5b52ee6df1
commit b36f1d8b0f
2 changed files with 20 additions and 7 deletions

View File

@ -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;

View File

@ -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)"
@radio-change="onRadioChange($event)" @checkbox-change="onCheckboxChange($event)"
:rowTogglerIcon="col.expander ? rowTogglerIcon(rowData): null"
: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;
}