diff --git a/packages/react-data-grid/src/Row.js b/packages/react-data-grid/src/Row.js index 898a3a28f6..f6a52fac73 100644 --- a/packages/react-data-grid/src/Row.js +++ b/packages/react-data-grid/src/Row.js @@ -47,12 +47,20 @@ class Row extends React.Component { } handleDragEnter = (e) => { - e.dataTransfer.dropEffect = 'move'; + // Prevent default to allow drop + e.preventDefault(); const { idx, cellMetaData: { onDragEnter } } = this.props; onDragEnter({ overRowIdx: idx }); }; + handleDragOver = (e) => { + e.preventDefault(); + e.dataTransfer.dropEffect = 'copy'; + }; + handleDrop = (e) => { + // The default in Firefox is to treat data in dataTransfer as a URL and perform navigation on it, even if the data type used is 'text' + // To bypass this, we need to capture and prevent the drop event. e.preventDefault(); }; @@ -154,6 +162,7 @@ class Row extends React.Component { className={className} style={style} onDragEnter={this.handleDragEnter} + onDragOver={this.handleDragOver} onDrop={this.handleDrop} > { diff --git a/packages/react-data-grid/src/masks/InteractionMasks.js b/packages/react-data-grid/src/masks/InteractionMasks.js index f074015779..963d836126 100644 --- a/packages/react-data-grid/src/masks/InteractionMasks.js +++ b/packages/react-data-grid/src/masks/InteractionMasks.js @@ -510,7 +510,7 @@ class InteractionMasks extends React.Component { }); }; - dragEnabled = () => { + isDragEnabled = () => { const { onGridRowsUpdated, onCellsDragged } = this.props; return this.isSelectedCellEditable() && (isFunction(onGridRowsUpdated) || isFunction(onCellsDragged)); }; @@ -521,7 +521,14 @@ class InteractionMasks extends React.Component { const isViewportDragging = e && e.target && e.target.className; if (idx > -1 && isViewportDragging) { e.dataTransfer.effectAllowed = 'copy'; - e.dataTransfer.setData('text/plain', JSON.stringify({ idx, rowIdx })); + // Setting data is required to make an element draggable in FF + const transferData = JSON.stringify({ idx, rowIdx }); + try { + e.dataTransfer.setData('text/plain', transferData); + } catch (ex) { + // IE only supports 'text' and 'URL' for the 'type' argument + e.dataTransfer.setData('text', transferData); + } this.setState({ draggedPosition: { idx, rowIdx } }); @@ -608,7 +615,7 @@ class InteractionMasks extends React.Component { selectedPosition={selectedPosition} {...this.getSelectionMaskProps()} > - {this.dragEnabled() && ( + {this.isDragEnabled() && (