Capturing grid item click event

See original GitHub issue

Is it possible to capture the grid item’s click and cancel the drag event? I want to open a modal window when a grid item is clicked, but I can’t figure out how to implement this. I’m capturing the click with onClick, but stopPropagation and preventDefault don’t prevent the mousedown event that starts the dragging process.

Issue Analytics

State:
Created 7 years ago
Reactions:2
Comments:18 (8 by maintainers)

Top GitHub Comments

15reactions

RiiDcommented, Jul 25, 2016

This may help

<RGL ... >
  <div> // If you add onMouseDown here react-draggable will override it. You will have to use nested element to capture clicks
    <div onMouseDown={ e => e.stopPropagation() }>
      ...
    </div>
  <div>
</RGL>

But you can achieve same effect using state and static elements or draggableCancel selectors.

6reactions

DigitalMarccommented, Dec 22, 2016

Cheers @nikolas. I went for the idiomatic hacky way but with the lowest friction to sort this out on both firefox and chrome as event handling behave differently. I listen for onDrag (was not working with onDragStart) and on onDragStop, setting a flag. Once dragging is done I reset that flag with a bit of delay, otherwise onClick is triggered. Simply put the flag is used to secure onClick. Same logic is used for resize. Hope that can help:

import React from 'react';
import { Responsive, WidthProvider } from 'react-grid-layout';
import _ from 'lodash';

const ResponsiveReactGridLayout = WidthProvider(Responsive);

class Exemple extends React.Component {
    constructor(props) {
        super(props)
        this.isDragging = false;
        this.isResizing = false;
    }

    static propTypes = {
        onItemClick: React.PropTypes.func.isRequired
    };

    onItemClick = (e) => {
        // idiomatic way to prevent a click when resizing
        if (!this.isDragging && !this.isResizing)
            this.props.onItemClick(e);
    }

    onDrag = (e) => {
        this.isDragging = true;
    }
    onDragStop = (e) => {
        // HACK: add some delay otherwise a click event is sent
        setTimeout((obj) => { obj.isDragging = false }, 200, this)
    }
    onResizeStart = (e) => {
        this.isResizing = true;
    }
    onResizeStop = (e) => {
        // HACK: add some delay otherwise a click event is sent
        setTimeout((obj) => { obj.isResizing = false }, 200, this)
    }
    createElement = (el) => {
        return (
            <div key={el.datagrid.i} data-grid={el.datagrid} onClick={this.onItemClick.bind(this, el.datagrid.i)} >
                <div>....</div>
            </div>
        );
    }
    render() {
        return (
            <ResponsiveReactGridLayout 
            ... // other props
                onDrag={this.onDrag}
                onDragStop={this.onDragStop}
                onResizeStart={this.onResizeStart}
                onResizeStop={this.onResizeStop}
                >
                {_.map(this.props.items, this.createElement)}
            </ResponsiveReactGridLayout>
        );
    }
}