How to Build a Draggable React Column Layout

[00:00 - 00:10] Drag column. Let's implement dragging for the column component. Openers see column TSX and define the ref constant that will hold the reference to the dragged div element.

[00:11 - 00:26] Constrref = use ref. We specify the type of this ref HTML div element and we pass in the default value null. Import view ref from react. Pass the ref to the column container ref = ref.

[00:27 - 00:41] Now we'll use the use item drag hook to find out when did the user begin dragging the column. Constr. Drag = use item drag. Pass in the options type column ID text.

[00:42 - 00:57] Import use item drag from the utils and also get the dragged item from the up state. Now the hover event that will use to make the column drop target might be triggered too frequently.

[00:58 - 01:06] So we'll use the throttle function from the throttle debounce TS package. Install this package. Yarn add throttle debounce TS.

[01:07 - 01:14] After it's installed get the drop function drop. It's the second returned value from the use drop hook.

[01:15 - 01:30] So we skip the first one add a comma and then define the drop using use drop and pass the options there. So this hook should accept only columns. We define the hover handler.

[01:31 - 01:41] As I said we throttle it 200 milliseconds should be enough and passing the callback. First we check that the dragged item exists. If no dragged item then we return.

[01:42 - 02:09] If it exists then we check if the dragged item type is a column then we check if dragged item ID equals ID then we return. Otherwise if it's a column but the idea of our column doesn't match is not equal to drag the item ID then we dispatch move list with dragged item ID and the idea of our column.

[02:10 - 02:19] Okay now we combine drag with drop with ref launch the app Yarn start. You should be able to drag the columns.