Make an element draggable on touchscreen devices
Written byPhuoc Nguyen
Created
28 Oct, 2023
Last updated
10 Nov, 2023
Tags
draggable element, React drag drop, touch events
Supporting drag and drop on touchscreen devices like mobiles or tablets is crucial for creating a seamless user experience. As touch-enabled devices become more popular, users expect web applications to behave just like native apps. This interaction pattern is common in many mobile apps, such as rearranging icons on the home screen or moving items between lists. By supporting this on the web, we provide users with a familiar and intuitive experience that feels natural and effortless.
Moreover, supporting touchscreen drag and drop can improve accessibility for users who struggle with traditional input methods like a mouse or keyboard. Touchscreens offer an alternative input method that can be easier to use for some individuals. Therefore, it's essential to ensure that our web applications are accessible to everyone, regardless of their physical abilities.
To sum up, supporting drag and drop on touchscreen devices is crucial for creating a modern and accessible user interface that meets the expectations of today's users. In our previous post, we learned how to make an element draggable. In this post, we'll show you how to bring this functionality to touchscreen devices.
#Disabling browser touch gestures
To enable touch-based dragging, we need to listen for touch events in addition to mouse events. However, we must ensure that the browser doesn't handle these touch events natively, as this could interfere with our drag and drop functionality.
To accomplish this, we can set the CSS property
`touch-action` to `none` on our draggable element. This instructs the browser to leave touch gestures on this element to us, and not to handle them itself.css
.draggable {
touch-action: none;
}To ensure that our drag and drop functionality works seamlessly on both desktop and mobile devices, we need to take a simple yet essential step. By disabling the default behavior of touch gestures on our draggable element, we can provide a consistent user experience across all platforms and input devices.
If we don't set this property, the browser might zoom or scroll when we try to interact with the target element using our fingers.
This means that users can easily drag the element using their fingers on touch-enabled devices such as smartphones and tablets.
#Handling the touch events
Next, let's add the
`touchstart`, `touchmove`, and `touchend` events to our component's event handlers. The `touchstart` event is like the `mousedown` event, while `touchmove` is similar to `mousemove`. Lastly, `touchend` is equivalent to `mouseup`.To handle touch events, we can modify our code like this:
ts
const handleTouchStart = (e: React.TouchEvent) => {
const touch = e.touches[0];
const startPos = {
x: touch.clientX - dx,
y: touch.clientY - dy,
};
const handleTouchMove = (e: React.TouchEvent) => {
...
};
const handleTouchEnd = () => {
document.removeEventListener('touchmove', handleTouchMove);
document.removeEventListener('touchend', handleTouchEnd);
};
document.addEventListener('touchmove', handleTouchMove);
document.addEventListener('touchend', handleTouchEnd);
};In this code snippet, we've defined three new functions to handle three new events:
`handleTouchStart()`, `handleTouchMove()`, and `handleTouchEnd()`.In each function, we've used similar logic as before, but with some minor changes. For example, instead of using the mouse position, we now get information about a single finger from the
`TouchEvent` object's `touches` array. We also update our state and CSS styles as appropriate.You can check out the source code of the demo below to see how easy it is to modify mouse events to support touch equivalents.
To add the new event listeners, we simply attach them to our element using the
`onTouchStart` props.tsx
<div
ref={eleRef}
className="draggable"
onMouseDown={handleMouseDown}
onTouchStart={handleTouchStart}
>
Drag me!
</div>We've improved the accessibility and user-friendliness of our draggable component by adding touch events, making it compatible with a wider range of devices. Take a look at the final demo to see it in action!
#Conclusion
In this post, we've learned how to make elements draggable on touchscreen devices and how to handle touch events to ensure smooth drag and drop functionality on both desktop and mobile devices.
By supporting drag and drop on touchscreens, we can create a modern and accessible user interface that meets the expectations of today's users. This not only improves the user experience but also makes our web applications more inclusive for individuals who struggle with traditional input methods like a mouse or keyboard.
We hope that this post has been helpful in showing you how to add touch-based dragging functionality to your web application. With some simple modifications, you can create a seamless user experience that works across all platforms and input devices. So go ahead and make your web app more user-friendly and accessible to all!
Questions? 🙋
Do you have any questions about front-end development? If so, feel free to create a new issue on GitHub using the button below. I'm happy to help with any topic you'd like to learn more about, even beyond what's covered in this post.
While I have a long list of upcoming topics, I'm always eager to prioritize your questions and ideas for future content. Let's learn and grow together! Sharing knowledge is the best way to elevate ourselves 🥷.
Recent posts ⚡
Newsletter 🔔
If you're into front-end technologies and you want to see more of the content I'm creating, then you might want to consider subscribing to my newsletter.
By subscribing, you'll be the first to know about new articles, products, and exclusive promotions.
Don't worry, I won't spam you. And if you ever change your mind, you can unsubscribe at any time.
Phước Nguyễn