katoid / angular-grid-layout

Responsive grid with draggable and resizable items for Angular applications.
https://katoid.github.io/angular-grid-layout
MIT License
462 stars 61 forks source link

Is there a way to prevent mouse events propgating to grid when interacting with contents of grid item? #13

Closed sukeshlaghate closed 3 years ago

sukeshlaghate commented 3 years ago

Thank you for developing this great library. I am using ng2-qgrid library to display table in grid-item. When I try to resize the column of the table, mouse drag event gets propagated to grid causing entire item to be dragged instead of column being resized. So my question is this is there a way/mechanism to prevent mouse interactions from bubbling up to grid?

Thanks in advance for pointers/solution.

llorenspujol commented 3 years ago

You need to stop the propagation on the mousedown event that comes from the the ng2-grid library, like: event.stopPropagation() where 'event' is a mousedown event. This way you would prevent the event from bubbling up and consequently making the undesired drag action.

Said that, if whatever reason this doesn't fit your needs, I would recommend you using a custom handle. You would have total control over it, and you can place it whatever you want, for example somewhere that doesn't collisions with the column of ng-qgrid. Here is the example of custom handles: https://katoid.github.io/angular-grid-layout/custom-handles And the code is here: https://github.com/katoid/angular-grid-layout/tree/main/projects/demo-app/src/app/custom-handles

sukeshlaghate commented 3 years ago

Thank you for solution. I went ahead with custom handle approach. It was better suited son e it didn't require intervening with ng2-qgrid event handling mechanism.