Chapter 108: Reorder

Core Idea

Easily create drag-to-reorder lists and grids with Motion for Vue's Reorder components. Use Reorder.Group and Reorder.Item to manage item order, with automatic axis detection, layout and exit animations.

Key Concepts

• Drag axis: Reorder.Group automatically detects whether its items are arranged horizontally
• Layout animations: Reorder.Item components are already configured to perform layout animations
• Exit animations: AnimatePresence can be used as normal to animate items as they enter/leave the Vue tree.
• Drag triggers: By default
• Auto-scroll lists: If Reorder.Item components are within a scrollable container
• z-index: Reorder.Item will automatically set a z-index style on the currently dragged item so it ap
• API: Default: "ul"
• Reorder.Group: Default: "ul"
• as: Default: "ul"

Code Examples

<script setup>
  import { Reorder } from "motion-v"
  const items = ref([0,1,2,3])
</script>

<template>  
  <Reorder.Group v-model:values="items">
      <Reorder.Item v-for="item in items" :key="item" :value="item">
        {{item}}
      </Reorder.Item>
  </Reorder.Group>
</template>

• What it demonstrates: Core usage pattern for Reorder.

Key Takeaways

1. Reorder supports Drag axis.
2. Reorder supports Layout animations.
3. Reorder supports Exit animations.

Connects To

• Vue <motion /> component: related Motion doc page.
• Vue layout animations: related Motion doc page.
• AnimatePresence: related Motion doc page.
• To-do list example & tutorial for React: related Motion doc page.