DND using React-Grid-Layout.
RGL(React-Grid-Layout) is a library which makes developer’s work easy by combining two of the react’s ‘draggable’ and ‘resizable’ library.
Why to go with RGL ?
Well, the best answer will be if it satisfies all your use-cases. It had all that I needed.
-> Drag from a specific location.
-> The height of the grid to be Fixed.
-> User to be allowed to resize grid either to full screen width or half of it.
To drag from a specific location, i.e either from a header section or a button, all you need to do is add a ‘class name’ to the header ‘div’ or ‘button’ tag. The same class name should be passed as prop value to draggableHandle in RGL.
User can drag the grid only from the header section. This is the same with draggableCancel.
Note:- Do Not forget to precede the class name with dot in draggableHandle/draggableCancel.
RGL maintains a layout array with each of the grid’s height(h), width(w), co-ordinates(x,y) and a key(i).
In order to keep the height of the grid to be Fixed, mention ‘minH’ & ‘maxH’ as similar value in the layout. Also, we have to provide the height of each row. The rowHeight prop in RGL defines the height of the grid. If rowHeight is ‘150’ and the grid’s height is ‘two’ in the layout, then the height of grid is going to be ‘300’ (rowHeight * height of the grid in layout).
If you want to restrict user on resizing a grid to either 50% or 100%, provide cols prop with value as ‘two’ in RGL.
On Dragging and dropping a grid onLayoutChange event is triggered and it returns current layout and all Layouts. If you want to save the layout you can do that too.
onResize event is triggered when a grid item resizes, it also returns the layout similar to that of onLayoutChange.
Resizing a grid-item using a button and rearranging the other grid-item’s will be covered in my next article.
For the above working example Click here
For more details on RGL, please Click here