CodStak Weekly Challenge #6: Drag and Drop Interface

Test your React Knowledge

Hey coders,

It's almost the end of the year. Wow, the year has gone by so fast. Well, I hope you all have a really good 2025. If you are preparing to get your first job in tech, I think the coming year will bring decent opportunities in the tech world.

So, why not you test your knowledge with this week’s challenge?

In this challenge, you will implement a Drag and Drop interface using React and TypeScript. The task is to create a list of draggable items that can be moved around within the same list. You will manage the drag state, handle events for starting and stopping the drag, and update the position of items dynamically.

This challenge will help you practice working with React events, managing state, and building interactive user interfaces.

Key Features:

A list of draggable items that users can rearrange by dragging and dropping. Visual feedback for the dragged item (e.g., change background or border color). State management for tracking item positions. Event handling for drag and drop events (onDragStart, onDragOver, onDrop).

You can try the challenge here:

And that’s it for this week’s challenge, I hope you all have a tremendous new year. See you in 2025.

---