‘onDrag’ allows you to execute a function when a user drags a component. It is passed as a JSX attribute.

‘onDrag’ Use Cases

As its name suggests, ‘onDrag’ fires whenever a React component is being dragged. This can be useful in web apps that require drag-and-drop functionality, for example the famous work management app Trello.

Passing ‘onDrag’ in JSX as an attribute:

function handleDrag() { console.log("Dragging...") } return ( <div draggable onDrag={handleDrag}> Hello World </div> )

React ‘onDrag’ vs ‘onDragStart’

‘onDrag’ fires continuously while the element is being dragged by the user, while ‘onDragStart’ only fires once, when the user first drags an element.

‘onDragStart’ is good for drag-and-drop applications where there is only a single event occurring, for example a simple data transfer between React components. ‘onDrag’ is better when you need to continuously know when an element is being dragged, and act accordingly.

Here’s an example to illustrate this:

function DragComponent() { function handleDrag() { console.log("Dragging...") } return ( <div draggable onDrag={handleDrag}> Hello World </div> ) } export { DragComponent }

When dragged, the above component generates the following output in the console:

As soon as the component is dragged, output starts continuously streaming to the console. On the contrary, if we switch the attribute to ‘onDragStart’:

function DragComponent() { function handleDrag() { console.log("Dragging...") } return ( <div draggable onDragStart={handleDrag}> Hello World </div> ) } export { DragComponent }

The output to the console is only a single line:

Thus, ‘onDrag’ continuously calls its corresponding function, while ‘onDragStart’ only does so once.

Important note: notice how we set the ‘draggable’ attribute in the JSX elements above. We need to do this in order for ‘onDrag’ to be fired in the first place!

Example: Constantly Updating Element when Dragged

Sometimes, we’d like to constantly get information from an element while it’s being dragged. We need ‘onDrag’ for this, as we need the information to continuously update.

In the example below, we will continuously print an element’s x and y coordinates while being dragged to the console:

function DragComponent() { function handleDrag(e) { console.log("X: " + e.clientX + " | Y: " + e.clientY) } return ( <div draggable onDrag={handleDrag}> Hello World </div> ) } export { DragComponent }

There’s a bit to unpack here. As always with ‘onDrag’, we first set the JSX attribute ‘draggable’ to allow the drag operation.

We then set the ‘onDrag’ attribute to our ‘onDrag’ function, “handleDrag”. That way, when our element is dragged by the user, the “handleDrag” function will be continuously called.

We’ll notice that there is an “e” added as a parameter into the “handleDrag” function. This parameter represents the event object that is automatically passed into the function.

The event object that gets passed into the function has several attributes we can call, including ‘clientX’ and ‘clientY’, which are the x and y positions of the event, respectively. In this case, x and y represent the coordinates of the element while the drag operation is taking place.

We print these values to the console, resulting in the output below when the element is dragged:

As we can see, the X and Y coordinates constantly update as the element is being dragged.

We’ll also notice that when the drag operation is complete, and the element snaps back to its original position, X and Y both return to 0. This shows that the element, and not the mouse, is generating the values of X and Y.

That’s it for this article! Please leave any questions or comments below.

👋 Hey, I'm Jesse Ryan Shue
I am a Full-Stack Developer and an Industrial/Mechanical Designer. I have work experience in Industrial Design, 3D printing, and teaching. I am experienced in Python, JavaScript, and SolidWorks CAD. Follow me on LinkedIn

💬 Leave a comment

Your email address will not be published. Required fields are marked *

We will never share your email with anyone else.