Drag-and-Drop

Who can’t remember the first time they rearranged apps on their mobile phone? App icons were flying all over the place. Somehow, though, they magically ended up in neatly arranged rows and columns. Nowadays, this experience is the default. People hardly notice it. When first introduced, it was state of the art, even jaw-dropping. Drag-and-drop was a known concept long before smartphones. But it was with the introduction of touch interfaces that it became a widely known phenomenon.

There is a certain feeling about virtual dragging. Things become tangible. It’s a pleasing sensation to be able to actively move items on the screen. Not all use cases are practical. The ones that work surely have their place. For instance, the drag-and-drop to upload is one excellent pattern.

This article looks into adding drag capabilities to another popular pattern, namely switches, also referred to as toggles. Adding drag to a switch is perhaps not particularly useful. Sometimes, though, it’s informative to playfully combine concepts. Even though the end result is not so valuable, other interesting conclusions might arise. The demo this article discusses is a remake of a Dribbble shot by Oleg Frolov. Here’s a video of the end result:

Video of useDrag toggle

---

The useDrag Library

useDrag is part of the react-use-gesture library. It’s a rich React gesture library. Be sure to check it out because there are some helpful examples and code to play around with.

Let’s dive in!

#reactjs #programming #javascript #react