Motion Lexicon
Search/
中文
System
Motion component

Drag to reorder

Keep pickup, placeholder, and drop states clear while reordering.

Preview

Live preview

Dragging items in a list to rearrange them, while the others shift to make room.

Preview
  • Drag item A
  • Drag item B
  • Drag item C
Authoritative vocabulary

Definition and close-term distinctions

English definitions are preserved verbatim from Animation Vocabulary; translations and distinctions help you choose precisely.

Canonical termdrag-to-reorder

Drag to reorder

拖拽排序
Authoritative definition

Dragging items in a list to rearrange them, while the others shift to make room.

Chinese translation

拖动列表项来重新排序，其他项目会移动并让出位置。

Browse all 91 terms
Design contract

Decide before this motion ships

Purpose, frequency, trigger, timing, interruptibility, and gesture rules shape the implementation.

Purpose

Keep the picked item, placeholder, and final drop location clear during list reordering.

Frequency

Use for user-driven low- to medium-frequency organization; automatic sorting needs no drag interaction.

Trigger

Trigger from pointerdown on a drag handle or a keyboard pickup command.

Enter / exit

Raise the item on pickup, shift neighbors during movement, and settle all items into final layout on drop.

Interruptibility

Allow cancellation back to the origin at any time, updating the placeholder live as the target changes.

Gesture and keyboard

Provide a dedicated handle, touch activation threshold, edge auto-scroll, keyboard movement, and position announcements.

Reduced-motion strategy

Remove follow-pointer animation and use pickup state, target highlighting, and an immediate reorder result.

Output

Copy into your interface

Current parameters update visual-state CSS, semantic HTML, the required vanilla JS runtime, and an interaction prompt.

Updates with parameters
motion.css
.motion-demo.motion-demo--drag-to-reorder {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 34rem);
  min-height: 15rem;
  padding: 2rem;
  overflow: hidden;
  color: #18181b;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 12px;
  isolation: isolate;
}

.motion-demo.motion-demo--drag-to-reorder *, .motion-demo.motion-demo--drag-to-reorder *::before, .motion-demo.motion-demo--drag-to-reorder *::after {
  box-sizing: border-box;
}

.motion-demo.motion-demo--drag-to-reorder .motion-surface {
  position: relative;
  display: grid;
  gap: 0.65rem;
  width: min(100%, 18rem);
  padding: 1.25rem;
  background: #ffffff;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 10px 28px rgb(0 0 0 / 7%);
}

.motion-demo.motion-demo--drag-to-reorder .motion-line {
  display: block;
  width: 100%;
  height: 0.5rem;
  background: #e4e4e7;
  border-radius: 999px;
}

.motion-demo.motion-demo--drag-to-reorder .motion-line:last-child { width: 62%; }

.motion-demo.motion-demo--drag-to-reorder .motion-button {
  position: relative;
  min-height: 2.75rem;
  padding: 0.75rem 1.1rem;
  color: white;
  font: inherit;
  font-weight: 700;
  background: #18181b;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--drag-to-reorder .motion-button:focus-visible { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }

.motion-demo.motion-demo--drag-to-reorder .motion-action-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.motion-demo.motion-demo--drag-to-reorder .motion-replay-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--drag-to-reorder .motion-pausable-scene {
  width: min(100%, 22rem);
  display: grid;
  place-items: center;
}

.motion-demo.motion-demo--drag-to-reorder button.motion-surface {
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.motion-demo.motion-demo--drag-to-reorder .motion-replay-button,
.motion-demo.motion-demo--drag-to-reorder .motion-undo-button,
.motion-demo.motion-demo--drag-to-reorder .motion-dismiss-button,
.motion-demo.motion-demo--drag-to-reorder .motion-pause-button {
  min-height: 2.75rem;
  padding: 0.65rem 0.9rem;
  color: #18181b;
  font: 650 0.78rem/1 ui-sans-serif, system-ui, sans-serif;
  background: #ffffff;
  border: 1px solid #d4d4d8;
  border-radius: 7px;
  cursor: pointer;
}

.motion-demo.motion-demo--drag-to-reorder .motion-replay-button:focus-visible,
.motion-demo.motion-demo--drag-to-reorder .motion-undo-button:focus-visible,
.motion-demo.motion-demo--drag-to-reorder .motion-dismiss-button:focus-visible,
.motion-demo.motion-demo--drag-to-reorder .motion-pause-button:focus-visible,
.motion-demo.motion-demo--drag-to-reorder [data-reorder-item]:focus-visible,
.motion-demo.motion-demo--drag-to-reorder [data-swipe-target]:focus-visible {
  outline: 3px solid rgb(37 99 235 / 32%);
  outline-offset: 3px;
}

.motion-demo.motion-demo--drag-to-reorder .motion-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.motion-demo.motion-demo--drag-to-reorder .motion-ripple-ink {
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: rgb(255 255 255 / 72%);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  opacity: 0;
}

.motion-demo.motion-demo--drag-to-reorder .motion-state-stack { position: relative; width: min(100%, 18rem); height: 9rem; }
.motion-demo.motion-demo--drag-to-reorder .motion-state { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; }
.motion-demo.motion-demo--drag-to-reorder .motion-state--to { background: #18181b; color: white; }

.motion-demo.motion-demo--drag-to-reorder .motion-scroll-track > span { color: #71717a; font: 600 0.72rem/1.2 ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; }
.motion-demo.motion-demo--drag-to-reorder .motion-orbit-item { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; color: white; background: #2563eb; border-radius: 50%; }
.motion-demo.motion-demo--drag-to-reorder .motion-text-stack { position: relative; width: min(100%, 18rem); min-height: 4rem; }
.motion-demo.motion-demo--drag-to-reorder svg { width: min(100%, 20rem); height: auto; }

.motion-demo.motion-demo--drag-to-reorder .motion-list { display: grid; gap: 0.5rem; width: min(100%, 18rem); margin: 0; padding: 0; list-style: none; }
.motion-demo.motion-demo--drag-to-reorder .motion-list-item { position: relative; padding: 0.85rem 1rem; touch-action: none; cursor: grab; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 8px; }
.motion-demo.motion-demo--drag-to-reorder .motion-list-item.is-dragging { cursor: grabbing; box-shadow: 0 18px 34px rgb(0 0 0 / 18%); }
.motion-demo.motion-demo--drag-to-reorder .motion-list-item.is-drop-target { box-shadow: inset 0 2px #2563eb; }
.motion-demo.motion-demo--drag-to-reorder .motion-list-item.is-keyboard-dragging { outline: 3px solid rgb(37 99 235 / 32%); outline-offset: 3px; }
.motion-demo.motion-demo--drag-to-reorder .motion-drop-placeholder { min-height: 2.75rem; border: 1px dashed #2563eb; border-radius: 8px; background: rgb(37 99 235 / 8%); }

@keyframes motion-drag-to-reorder-reduced-fade {
  from { opacity: 0.84; }
  to { opacity: 1; }
}

.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder {
  animation: motion-drag-to-reorder-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder *,
.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder *::before,
.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder *::after {
  animation: none !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-property: opacity, color, background-color, border-color !important;
  transition-duration: 160ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}

.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder .motion-button,
.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder [data-reorder-item],
.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder [data-swipe-target],
.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder [data-spring-target] {
  transform: none !important;
}

.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder .motion-path { stroke-dashoffset: 0 !important; }
.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder .motion-word--from { opacity: 0 !important; visibility: hidden; }
.force-reduced-motion .motion-demo.motion-demo--drag-to-reorder .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .motion-demo.motion-demo--drag-to-reorder {
    animation: motion-drag-to-reorder-reduced-fade 160ms cubic-bezier(0.23, 1, 0.32, 1) both !important;
  }

  .motion-demo.motion-demo--drag-to-reorder *, .motion-demo.motion-demo--drag-to-reorder *::before, .motion-demo.motion-demo--drag-to-reorder *::after {
    animation: none !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color !important;
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .motion-demo.motion-demo--drag-to-reorder .motion-button,
  .motion-demo.motion-demo--drag-to-reorder [data-reorder-item],
  .motion-demo.motion-demo--drag-to-reorder [data-swipe-target],
  .motion-demo.motion-demo--drag-to-reorder [data-spring-target] {
    transform: none !important;
  }

  .motion-demo.motion-demo--drag-to-reorder .motion-path { stroke-dashoffset: 0 !important; }
  .motion-demo.motion-demo--drag-to-reorder .motion-word--from { opacity: 0 !important; visibility: hidden; }
  .motion-demo.motion-demo--drag-to-reorder .motion-word:not(.motion-word--from) { opacity: 1 !important; filter: none !important; transform: none !important; }
}
Review notes

Pre-delivery review

  • Test long lists, scroll containers, and group boundaries.
  • Restore the previous order if persistence fails.
Accessibility

Keep information accessible

Reduced motion

Remove follow-pointer animation and use pickup state, target highlighting, and an immediate reorder result.

Parameters

Parameter reference

ParameterRange / optionsDefaultPurpose
duration80ms–1200ms180msControls the time required for one motion cycle.
distance0px–120px48pxControls how far the element travels.
scale70%–105%103%Controls the starting size relative to the final state.
easeSoft / Snap / Calm / LinearSnapControls how velocity changes over time.
Related entries
Hover effectPress / Tap feedbackHold to confirm