Drag and Drops
Recently I’ve been feeling like a master of my own lane. As a frontend engineer, I’m pretty confident in doing things that are required of me in my current role. Every so often, I’ll get curious about something that maybe I should know as a frontend developer but I just haven’t been exposed to.
A few weeks ago we made some changes to an existing feature that had drag and drop functionality. We use a library for it that makes it very simple to implement but that got me thinking… I’ve actually never built something out like that. Sometimes as a react developer, I can get very comfortable with just implementing someones library and moving on for the sake of the project. Not today though. I genuinely had no idea how drag and drops worked so I wanted to make a simple one.
First things first. Did you know that divs have an attribute called ‘draggable’!? It’s a boolean that does exactly what it sounds like. If truthy, your component can be dragged. Along with this, there’s a couple of event listeners that I was new to:
- onDragStart
- onDragEnter
- onDragEnd
Okay, I think that’s about all the new information I had to teach myself. Not bad right? Let’s breakdown the code and dissect all the three handlers that deal with the event listeners mentioned.
We have a list of strings that gets iterated over to generate a div element. Each element will have the three event listeners which tracks when someones finger/cursor has started dragging a component, when the finger/cursor has lifted on the page, and when the finger/cursor drags an element on top of the other.
OnDragStart
Make sure to create a node reference like ‘dragItem’. DragItem gets defined inside the onDragStart handler function which we’ve called ‘dragEnter’. This will be a way for us to track which element we’re interested in as well as store it’s position/index. That’ll come in handy when we need to update state by removing it from it’s existing position and adding it into the new position.
OnDragEnter
Speaking of that new position, we need to know where that position is. We’ll create another reference node like ‘dragOverItem’ which gets defined when our ‘dragItem’ element is on top it.
Great! So now we’re tracking all the essentials. The current position of our item and the new position where it will drop into place!
onDragEnd
Lastly, we’ll want to update our list with our new items arrangement. We’ll make a copy of our list (copyListItem) as well as create a reference to the content of our dragged item (dragItemContent).
Now we’ll splice twice. The first splice will remove the dragItem from the list since we know where that position/index is because of onDragStart. The second splice will inject it into the new position since we know where that is because of onDragEnter.
Now that you’ve got you’re new list, update your state with the newly arranged list and voila!
As much as I’d like to take credit for this one, I followed an article that implemented this. I hope this breakdown of it helps! Happy coding 🤟
