A React component that allows users to drag and move both regular DOM elements as well as SVG elements. Today i will show you how to Make a Simple Custom Drag to Move Component in React.
A React component that allows users to drag and move both regular DOM elements as well as SVG elements.
I love making interesting interactive web things, and I recently wrote an article about creating a
useDrag hook in React. Like I mentioned in that article, there are about a bazillion drag and/or drop libraries out there, both specifically for React or otherwise. For example, react-beautiful-dnd is, well, a beautiful drag and drop implementation that’s intended to be used to move between lists, a lot like Trello. That said, sometimes you don’t need all that firepower and you just need something small, or you just like to tinker and write your own code!
Again, my other article dealt with dragging components using React Hooks, which has its advantages and disadvantages; this one’ll focus on a container component that wraps elements and uses React’s built-in event handlers. We’ll also go through how to upgrade our component to allow it to drag an