Make Drag and Drop Example work on Touch Devices #970
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
4 Skipped Deployments
|
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Pull Request Overview
This PR modernizes the drag and drop example to work on touch devices by replacing the HTML Drag and Drop API with pointer events. The implementation maintains the same user experience while adding touch device support.
Key changes:
- Replaced HTML Drag and Drop API with pointer events for cross-device compatibility
- Converted from JSX to TSX with proper TypeScript types
- Implemented a custom drag ghost component for visual feedback
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| useDnD.tsx | New comprehensive hook providing pointer-based drag and drop functionality with TypeScript |
| App.tsx | Converted to TypeScript and updated to use new drag and drop system |
| Sidebar.tsx | Converted to TypeScript and replaced drag events with pointer events |
| index.tsx | Added null check for container element |
| index.css | Added active cursor state for dragging elements |
| README.mdx | Updated documentation to reflect pointer events implementation |
| DnDContext.jsx | Removed old context implementation |
| App.jsx | Removed old JSX implementation |
| Sidebar.jsx | Removed old JSX implementation |
| @@ -4,6 +4,9 @@ import App from './App'; | |||
| import './index.css'; | |||
|
|
|||
| const container = document.querySelector('#app'); | |||
| if (!container) { | |||
| throw new Error("Root container '#app' not found"); | |||
| } | |||
| const root = createRoot(container); | |||
There was a problem hiding this comment.
The createRoot call should use the non-null assertion operator since we've already verified container is not null, or the type should be updated to reflect this.
| const root = createRoot(container); | |
| const root = createRoot(container!); |
Copilot uses AI. Check for mistakes.
| return; | ||
| } | ||
|
|
||
| (event.target as HTMLElement).releasePointerCapture(event.pointerId); |
There was a problem hiding this comment.
The event.target might not be an HTMLElement. You should check if the target supports releasePointerCapture before calling it to avoid runtime errors.
| (event.target as HTMLElement).releasePointerCapture(event.pointerId); | |
| if ( | |
| event.target && | |
| typeof (event.target as any).releasePointerCapture === 'function' | |
| ) { | |
| (event.target as HTMLElement).releasePointerCapture(event.pointerId); | |
| } |
Copilot uses AI. Check for mistakes.
Close #889