Explore the intricacies of building drag-and-drop functionality from scratch in this 24-minute conference talk from React Advanced 2019. Dive into browser-native tools for creating performant, accessible, and mobile-friendly drag-and-drop experiences without relying on hefty external libraries. Learn about mouse and touch event handling, element positioning, CSS transforms, React Portals, and accessibility considerations. Follow along with a live demonstration and discover how to implement custom drag-and-drop solutions. Examine API design, long list optimization, and thorough testing strategies including unit tests, keyboard support, and cross-browser compatibility. Gain insights into creating efficient, lightweight drag-and-drop features for React applications.
Overview
Syllabus
Introduction
DragDrop
Its 2019
Unassigned
Customization
Existing Solutions
Google
Wix
React
Mouse Touch
Mouse Position
Measure Things
Position Elements
CSS Transform
React Portal
Accessibility
Demonstration
How to implement this
LifeRegion API
Lets make it pretty
Drop Animation
Transition
Initial Application
API
Other use cases
Long lists
Improve previous API
New API
RenderList
Test Coverage
Unit Tests
Descriptive Tests
Keyboard
Image Snapshot
Internet Explorer
iPhone
CSS
Chrome
PreventDefault
ReactEvent
Prep
Puppet
React Wrench
React View
Interactive Playground
Edit Component
Taught by
React Conferences by GitNation
