Reorder
Reorder 组件可以用于创建拖拽重新排序列表，例如可重新排序的标签页或待办事项。
const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group axis="y" values={items} onReorder={setItems}> {items.map((item) => ( <Reorder.Item key={item} value={item}> {item} </Reorder.Item> ))} </Reorder.Group> )
注意： Reorder 适用于简单的拖拽重新排序实现。它非常轻量级，基于基础的 motion 组件之上，但缺少一些功能，例如多行、在列之间拖拽或在可滚动容器内拖拽。对于高级用例，我们推荐类似DnD Kit.
用法
每个可重新排序的列表都包裹在 Reorder.Group 组件中。
import { Reorder } from "motion/react" function List() { return ( <Reorder.Group> </Reorder.Group> ) }
默认情况下，这会渲染为一个 <ul>，但这可以使用 as 属性进行更改。
<Reorder.Group as="ol">
Reorder.Group 必须通过 values 属性传递可重新排序列表中的值数组。
此外，onReorder 事件将在计算出最新顺序时触发。为了使项目重新排序，这必须更新 values 状态。
import { Reorder } from "framer-motion" function List() { const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group values={items} onReorder={setItems}> </Reorder.Group> ) }
要渲染每个可重新排序的项目，请使用 Reorder.Item，通过 value 属性传递它所代表的值。
import { Reorder } from "framer-motion" function List() { const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group values={items} onReorder={setItems}> {items.map(item => ( <Reorder.Item key={item} value={item}> {item} </Reorder.Item> ))} </Reorder.Group> ) }
现在，当项目被拖拽和重新排序时，onReorder 将会触发并返回新的顺序。
布局动画
Reorder.Item 组件已经配置为执行布局动画，因此如果向可重新排序的列表添加或删除新项目，周围的项目将自动动画到它们的新位置。
退出动画
可以像正常情况一样使用 AnimatePresence 来动画项目在进入/离开 React 树时的效果。
<AnimatePresence> {items.map(item => ( <Reorder.Item initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} key={item} /> ))} </AnimatePresence>
拖拽触发器
默认情况下，Reorder.Item 的所有部分都是可拖拽的。useDragControls 可以用于定义一个不同的组件作为拖拽触发器。
import { Reorder, useDragControls } from "framer-motion" function Item({ value }) { const controls = useDragControls() return ( <Reorder.Item value={value} dragListener={false} dragControls={controls} > <div className="reorder-handle" onPointerDown={(e) => controls.start(e)} /> </Reorder.Item> ) }
可滚动列表
如果 Reorder.Item 组件位于可滚动容器内，则该容器需要 layoutScroll 属性，以便 Framer Motion 可以正确测量其滚动偏移量。
<Reorder.Group axis="y" onReorder={setItems} layoutScroll style={{ overflowY: "scroll" }} > {items.map((item) => ( <Item key={item} item={item} /> ))} </Reorder.Group>
z-index
Reorder.Item 将自动在当前拖拽的项目上设置 z-index 样式，使其显示在周围项目之上。
但是，z-index 仅影响 position !== "static" 的项目。因此，要启用此效果，请确保将 Reorder.Item 的 position 设置为 relative 或 absolute。
API
Reorder.Group
as
默认值: "ul"
Reorder.Group 要渲染为的基础元素。
<Reorder.Group as="div"></Reorder.Group>
axis
默认值: "y"
重新排序检测的方向。
注意：默认情况下，所有 Reorder.Item 组件仅在此轴上可见地移动。要在两个轴上允许视觉运动（但不是重新排序），请将 drag 属性传递给子 Reorder.Item 组件。
values
将被重新排序的值数组。此列表中的每个项目都必须与传递给每个 Reorder.Item 的 value 匹配。
onReorder
当检测到项目已重新排序时将触发的回调。提供的 newOrder 应该传递给 values 状态更新函数。
const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group values={items} onReorder={setItems}>
Reorder.Item
Reorder.Item 组件接受所有 motion组件属性以及以下属性
as
默认值: "li"
Reorder.Item 要渲染为的元素。
value
当调用 onReorder 时，这是将在新排序的数组中传递的值。
Reorder 组件可以用于创建拖拽重新排序列表，例如可重新排序的标签页或待办事项。
const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group axis="y" values={items} onReorder={setItems}> {items.map((item) => ( <Reorder.Item key={item} value={item}> {item} </Reorder.Item> ))} </Reorder.Group> )
注意： Reorder 适用于简单的拖拽重新排序实现。它非常轻量级，基于基础的 motion 组件之上，但缺少一些功能，例如多行、在列之间拖拽或在可滚动容器内拖拽。对于高级用例，我们推荐类似DnD Kit.
用法
每个可重新排序的列表都包裹在 Reorder.Group 组件中。
import { Reorder } from "motion/react" function List() { return ( <Reorder.Group> </Reorder.Group> ) }
默认情况下，这会渲染为一个 <ul>，但这可以使用 as 属性进行更改。
<Reorder.Group as="ol">
Reorder.Group 必须通过 values 属性传递可重新排序列表中的值数组。
此外，onReorder 事件将在计算出最新顺序时触发。为了使项目重新排序，这必须更新 values 状态。
import { Reorder } from "framer-motion" function List() { const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group values={items} onReorder={setItems}> </Reorder.Group> ) }
要渲染每个可重新排序的项目，请使用 Reorder.Item，通过 value 属性传递它所代表的值。
import { Reorder } from "framer-motion" function List() { const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group values={items} onReorder={setItems}> {items.map(item => ( <Reorder.Item key={item} value={item}> {item} </Reorder.Item> ))} </Reorder.Group> ) }
现在，当项目被拖拽和重新排序时，onReorder 将会触发并返回新的顺序。
布局动画
Reorder.Item 组件已经配置为执行布局动画，因此如果向可重新排序的列表添加或删除新项目，周围的项目将自动动画到它们的新位置。
退出动画
可以像正常情况一样使用 AnimatePresence 来动画项目在进入/离开 React 树时的效果。
<AnimatePresence> {items.map(item => ( <Reorder.Item initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} key={item} /> ))} </AnimatePresence>
拖拽触发器
默认情况下，Reorder.Item 的所有部分都是可拖拽的。useDragControls 可以用于定义一个不同的组件作为拖拽触发器。
import { Reorder, useDragControls } from "framer-motion" function Item({ value }) { const controls = useDragControls() return ( <Reorder.Item value={value} dragListener={false} dragControls={controls} > <div className="reorder-handle" onPointerDown={(e) => controls.start(e)} /> </Reorder.Item> ) }
可滚动列表
如果 Reorder.Item 组件位于可滚动容器内，则该容器需要 layoutScroll 属性，以便 Framer Motion 可以正确测量其滚动偏移量。
<Reorder.Group axis="y" onReorder={setItems} layoutScroll style={{ overflowY: "scroll" }} > {items.map((item) => ( <Item key={item} item={item} /> ))} </Reorder.Group>
z-index
Reorder.Item 将自动在当前拖拽的项目上设置 z-index 样式，使其显示在周围项目之上。
但是，z-index 仅影响 position !== "static" 的项目。因此，要启用此效果，请确保将 Reorder.Item 的 position 设置为 relative 或 absolute。
API
Reorder.Group
as
默认值: "ul"
Reorder.Group 要渲染为的基础元素。
<Reorder.Group as="div"></Reorder.Group>
axis
默认值: "y"
重新排序检测的方向。
注意：默认情况下，所有 Reorder.Item 组件仅在此轴上可见地移动。要在两个轴上允许视觉运动（但不是重新排序），请将 drag 属性传递给子 Reorder.Item 组件。
values
将被重新排序的值数组。此列表中的每个项目都必须与传递给每个 Reorder.Item 的 value 匹配。
onReorder
当检测到项目已重新排序时将触发的回调。提供的 newOrder 应该传递给 values 状态更新函数。
const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group values={items} onReorder={setItems}>
Reorder.Item
Reorder.Item 组件接受所有 motion组件属性以及以下属性
as
默认值: "li"
Reorder.Item 要渲染为的元素。
value
当调用 onReorder 时，这是将在新排序的数组中传递的值。
Reorder 组件可以用于创建拖拽重新排序列表，例如可重新排序的标签页或待办事项。
const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group axis="y" values={items} onReorder={setItems}> {items.map((item) => ( <Reorder.Item key={item} value={item}> {item} </Reorder.Item> ))} </Reorder.Group> )
注意： Reorder 适用于简单的拖拽重新排序实现。它非常轻量级，基于基础的 motion 组件之上，但缺少一些功能，例如多行、在列之间拖拽或在可滚动容器内拖拽。对于高级用例，我们推荐类似DnD Kit.
用法
每个可重新排序的列表都包裹在 Reorder.Group 组件中。
import { Reorder } from "motion/react" function List() { return ( <Reorder.Group> </Reorder.Group> ) }
默认情况下，这会渲染为一个 <ul>，但这可以使用 as 属性进行更改。
<Reorder.Group as="ol">
Reorder.Group 必须通过 values 属性传递可重新排序列表中的值数组。
此外，onReorder 事件将在计算出最新顺序时触发。为了使项目重新排序，这必须更新 values 状态。
import { Reorder } from "framer-motion" function List() { const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group values={items} onReorder={setItems}> </Reorder.Group> ) }
要渲染每个可重新排序的项目，请使用 Reorder.Item，通过 value 属性传递它所代表的值。
import { Reorder } from "framer-motion" function List() { const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group values={items} onReorder={setItems}> {items.map(item => ( <Reorder.Item key={item} value={item}> {item} </Reorder.Item> ))} </Reorder.Group> ) }
现在，当项目被拖拽和重新排序时，onReorder 将会触发并返回新的顺序。
布局动画
Reorder.Item 组件已经配置为执行布局动画，因此如果向可重新排序的列表添加或删除新项目，周围的项目将自动动画到它们的新位置。
退出动画
可以像正常情况一样使用 AnimatePresence 来动画项目在进入/离开 React 树时的效果。
<AnimatePresence> {items.map(item => ( <Reorder.Item initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} key={item} /> ))} </AnimatePresence>
拖拽触发器
默认情况下，Reorder.Item 的所有部分都是可拖拽的。useDragControls 可以用于定义一个不同的组件作为拖拽触发器。
import { Reorder, useDragControls } from "framer-motion" function Item({ value }) { const controls = useDragControls() return ( <Reorder.Item value={value} dragListener={false} dragControls={controls} > <div className="reorder-handle" onPointerDown={(e) => controls.start(e)} /> </Reorder.Item> ) }
可滚动列表
如果 Reorder.Item 组件位于可滚动容器内，则该容器需要 layoutScroll 属性，以便 Framer Motion 可以正确测量其滚动偏移量。
<Reorder.Group axis="y" onReorder={setItems} layoutScroll style={{ overflowY: "scroll" }} > {items.map((item) => ( <Item key={item} item={item} /> ))} </Reorder.Group>
z-index
Reorder.Item 将自动在当前拖拽的项目上设置 z-index 样式，使其显示在周围项目之上。
但是，z-index 仅影响 position !== "static" 的项目。因此，要启用此效果，请确保将 Reorder.Item 的 position 设置为 relative 或 absolute。
API
Reorder.Group
as
默认值: "ul"
Reorder.Group 要渲染为的基础元素。
<Reorder.Group as="div"></Reorder.Group>
axis
默认值: "y"
重新排序检测的方向。
注意：默认情况下，所有 Reorder.Item 组件仅在此轴上可见地移动。要在两个轴上允许视觉运动（但不是重新排序），请将 drag 属性传递给子 Reorder.Item 组件。
values
将被重新排序的值数组。此列表中的每个项目都必须与传递给每个 Reorder.Item 的 value 匹配。
onReorder
当检测到项目已重新排序时将触发的回调。提供的 newOrder 应该传递给 values 状态更新函数。
const [items, setItems] = useState([0, 1, 2, 3]) return ( <Reorder.Group values={items} onReorder={setItems}>
Reorder.Item
Reorder.Item 组件接受所有 motion组件属性以及以下属性
as
默认值: "li"
Reorder.Item 要渲染为的元素。
value
当调用 onReorder 时，这是将在新排序的数组中传递的值。
