拖放
→Drag and Drop
@argyleink: View Transition powered drag n' drop!
just drag events then swappin DOM,
#CSS view transitions doin all the animation work (which it's GREAT AT)
🤯
that animated emoji don't miss a beat
try it!
https://codepen.io/argyleink/pen/rNQZbLr
https://video.twimg.com/ext_tw_video/1686151316442398723/pu/vid/958x720/S_pcN1811HpTyg86.mp4?tag=12#.mp4
single vertical list - basic ⋅ Storybook
atlassian/react-beautiful-dnd: Beautiful and accessible drag and drop for lists with React
@alexandereardon: react-beautiful-dnd has a great feeling auto scroller, but it has some limitations
I am making a new _optional_ auto scroller for Pragmatic drag and drop
🧵Here are my ideas, let me know if you think I have missed something!
📺 The rbd auto scroller in action
https://video.twimg.com/ext_tw_video/1684433838104272896/pu/vid/720x1396/ZSkNH33wPuDKBuHA.mp4?tag=12#.mp4
$ npm install react-beautiful-dnd --save
dnd kit – a modern drag and drop toolkit for React
Overview | @dnd-kit – Documentation
Pragmatic drag and drop - About - Components - Atlassian Design System
atlassian/pragmatic-drag-and-drop: Fast drag and drop for any experience on any tech stack
RGL Example 0 - Showcase
react-grid-layout/react-grid-layout: A draggable and resizable grid layout with responsive breakpoints, for React.
Draggable JS – JavaScript drag and drop library
Shopify/draggable: The JavaScript Drag & Drop library your grandparents warned you about.
SortableJS
atlassian/pragmatic-drag-and-drop: Fast drag and drop for any experience on any tech stack
可拖曳物件
Draggable objects