How to Hide an Original Element While Dragging it in React

[00:00 - 00:43] Hide the Drag item. If you try to drag the column around, you will see that the original Drag column is still visible. Let's go to Style Sts and add an option to hide it. Define an interface, Drag, Preview, Container, Props. It's going to have only one flag is hidden. It's going to be an optional flag of type Boolean. We'll use it to define the Drag Preview Container. It's going to be a style div that we'll use for the items that you want to be able to hide. Expert. Const, Drag, Preview, Container. It's a style div with props of type Drag, Preview, Container, Props. Define the styles. Here we will only set the opacity.

[00:44 - 01:55] Opacity will depend on the props and if props is hidden, then it's going to be 0.3. We're not using 0 only so that it's easier to debug our application and see if we're actually moving the correct column. Later, we will change it to 0. Or, if it's not hidden, then we use 1. Now update the column container to extend the Drag Preview Container instead of div. Stiled, Drag, Preview, Container. As you can see the style namespace that we used to define the styles for the div elements can also be used as a function. This way we can extend the style components that we defined earlier. You can read more about the styled factory in the styled components documentation. We're going to be dragging not only the columns but also cards. So update the cards container, styled component as well. It also will extend the Drag, Preview, Container. Now we'll need to be able to calculate the ease hidden flag. Inside of the details folder, create a new file, ease hidden dot TS. Here we'll need the drag item type, import drag item from drag item. Define and export the ease hidden function.

[01:56 - 03:01] Import const is hidden. It will receive the drag item of type drag item or null , item type of type string and the ID of type string. Inside of this function, we'll return a Boolean that will calculate using dragged item and drag item type is equal to the current item type. That means that we're currently processing the is hidden field for the dragged item. And also the ID equals ID, dragged item ID equals ID. So if you're dragging something and the type of this something equals the past item type and the idea of this something is equal to ID passed to this function, then it means that this item should be hidden. Now go to column TSX and pass the ease hidden to the column container is hidden equals ease hidden passing the dragged item type column and ID of the current column. If you open the app and drag the columns now, you should see that the dragged column is now semi transparent.