https://github.com/ayush-97techyboy/xdragndrop
A responsive React Drag N Drop app using React & Vite
https://github.com/ayush-97techyboy/xdragndrop
array-manipulations html5-css3-javascript react-hooks reactjs-components responsive-web-design splice vanilla-css vitejs
Last synced: 6 days ago
JSON representation
A responsive React Drag N Drop app using React & Vite
- Host: GitHub
- URL: https://github.com/ayush-97techyboy/xdragndrop
- Owner: Ayush-97techyboy
- Created: 2026-04-04T17:22:19.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2026-04-18T18:03:40.000Z (about 2 months ago)
- Last Synced: 2026-04-18T19:26:55.522Z (about 2 months ago)
- Topics: array-manipulations, html5-css3-javascript, react-hooks, reactjs-components, responsive-web-design, splice, vanilla-css, vitejs
- Language: JavaScript
- Homepage: https://x-dragndrop.netlify.app/
- Size: 79.1 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# XDragNDrop: The Art of Seamless Reordering
Welcome to **XDragNDrop**, where numbers aren't just digits—they're interactive elements in a fluid, high-fidelity experience. This isn't your standard drag-and-drop; it's a meticulously crafted interface designed to feel alive, responsive, and tactile.
## 🧠 The Magic Under the Hood (The Logic)
Creating a smooth reordering experience requires more than just moving items. Here is how we made it feel so natural:
### 1. The "Shift" Reordering Logic
Unlike a simple swap, we use an **Array Splice Strategy**. When you drop an item:
- We first "pluck" the dragged digit out of its original position.
- We then "inject" it into the target slot.
- All other digits automatically shift and fill the gaps, ensuring the list always stays in a perfect 0-9 flow without leaving empty holes.
### 2. The "X-Ray" Interaction State
To give you total confidence during a move, we implemented a **Triple-State Visual Engine**:
- **The Original Spot**: Leaves behind a green-dashed "origin" box so you remember where you started.
- **The Ghost**: Your mouse carries a semi-transparent blue "blueprint" of the box.
- **The Preview Overlay**: As you hover over a potential home, we show the *original occupant* (the target) sitting perfectly still, while your *new number* floats over it. This "see-through" layering ensures you always know exactly what you are replacing.
### 3. Gap-Free Dragging
Standard drag-and-drop often "breaks" when your mouse passes between boxes. We fixed this by adding a **Global Drag Listener** on the entire container, ensuring the interaction remains active even if your cursor is in the empty space between the slots.
---
## 🎨 Design Philosophy
- **Human-Centric Spacing**: Every gap and margin has been manually tuned to feel "compact but breathable." We believe a tight layout creates a more focused task environment.
- **Typography with Character**: We chose **Outfit** for its clean geometric lines and **Archivo Black** for its heavy, dependable presence.
- **Responsive at Heart**: Whether you're on a massive 4K monitor or a small smartphone, the grid intelligently adapts from 5 columns down to 2, keeping the boxes large enough for your fingers or mouse.
---
## 🛠️ Built With
- **React & Vite**: For lightning-fast performance and crystal-clear code state.
- **Vanilla CSS**: No bulky frameworks—just raw, high-performance styling that gives us pixel-perfect control over every shadow and border.
## 🚀 Get Started
1. **Install Dependencies**: `npm install`
2. **Launch the Experience**: `npm run dev`
3. **Build for the World**: `npm run build`
---
*Made with 💙 to redefine how we interact with simple data by Ayush*