Improving Drag in React JS: A Smoother Approach to Draggable Elements
When building interactive web components, such as a draggable
element, you might run into the problem where the native draggable attribute leaves the original element in place while dragging a semi-transparent copy. This behavior can feel clunky and disrupts the user experience. In this blog, I’ll show you how to build a smooth draggable component where the element itself follows the mouse pointer, rather than a ghost image.
By default, when you set an HTML element to draggable="true"
, the browser shows a semi-transparent copy of the element that moves with your mouse. While this behavior is native and functional, it often doesn’t look great. You want to make sure that the original element moves smoothly with the cursor without showing the browser’s default ghost image.
Solution
The solution is to create an overlay element that follows the mouse pointer while hiding the original element during dragging. This approach improves the user experience and creates a smoother drag-and-drop interaction.
Step-by-Step Guide
-
Setup Initial State
We are going to need some state to handle the Drag & Drop.
isDragging
: This will store the current drag state of the element.
offset
: When the user starts dragging, they can click anywhere within the draggable element. This stores the coordinate distance between the element’s origin point and the clicked position.
position
: This will store the current cursor position.
draggableRef
: We’ll use this to retrieve the origin position of the draggable element.
-
Create the Draggable Element
First, let’s set up a simple HTML element to drag:
-
Handle Drag Start: Hide the Original and Create an Overlay
We are not going to use native
drag
events. Instead we will be usingonMouseDown
event as it will give us more flexibility.
-
Move the Overlay with the Mouse
In last step we had added an
eventListener
onmousemove
event. Now, let’s make sure that on mouse move the overlay follows it.
-
Clean Up on Drag End
Once the dragging is finished, we need to remove the overlay and make the original element visible again. Also we need to remove the
mousemove
event listener.
-
Styling the Draggable & Overlay
Finally, you can style the overlay so that it looks like the original element. This CSS will ensure that the overlay matches the original element’s appearance.
Conclusion
By using an overlay element to follow the mouse and hiding the original element, you can avoid the default ghost image that the browser shows when dragging. This method provides a smoother and more visually pleasing drag-and-drop experience.
Feel free to experiment with this solution in your projects, and let me know if you find any other creative ways to enhance the draggable experience!