视频教程源码
为了学习react-beautiful-dnd
,看了好几遍这个入门视频,英语渣只能按照视频一字一字的把代码敲出来。
视频目录如下:
- 课程介绍:优雅、可适用性的拖拽插件:
react-beautiful-dnd
- 使用
create-react-app
创建React
环境 - 使用
React
创建列表并设置样式 - 使用
react-beautiful-dnd
对列表进行拖拽、移动 - 使用
onDragEnd
函数让react-beautiful-dnd
保持列表拖拽状态 - 使用
react-beautiful-dnd
快照功能对列表进行样式修改 - 使用
react-beautiful-dnd
的onDragStart
和onDragEnd
自定义应用程序的外观 - 使用
dragHandleProps
设置可拖拽区域 - 使用
onDragEnd
进行多列拖拽、移动 - 使用
Draggable
和Droppable
对列表进行有条件的拖拽移动 - 使用
react-beautiful-dnd
创建可横向拖拽的应用程序 - 使用
react-beautiful-dnd
进行多列拖拽 - 使用
shouldComponentUpdate
和PureComponent
优化性能 - 使用
react-beautiful-dnd
自定义用于拖放的屏幕阅读器消息
打√
部分为敲过的代码~
中文文档
项目安装
npm install
# or
yarn
项目启动
npm start
# or
yarn start