Direct manipulation
Dragging is the one interaction where the pointer is the control and the preview at once, so the feedback has to answer three questions continuously: what am I holding, where will it land, and will that landing be accepted. Every drag also needs a keyboard equivalent, because a pointer gesture on its own is not an interface.
Pattern examples
Hover, focus, press, or toggle the specimens. Each recipe keeps the durable state in semantic markup and uses animation as a supporting layer.
Raise and tilt the item on pointer-down so the held object separates from the surface.
Switch the cursor to grabbing, set touch-action to none so the page does not scroll instead, and mirror the state for keyboard-initiated moves.
Nodlumecursor: grab;
&:active { cursor: grabbing; transform: scale(1.04) rotate(-1.5deg); }Change the destination surface while a valid item is over it, before anything is released.
Highlight the target rather than the pointer, and expose the same state on keyboard focus so a move can be confirmed without a mouse.
transition: border-color 150ms ease-out, background-color 150ms ease-out;Open a placeholder in the list at the index the item would take on release.
Measure the rows first and animate the difference with transforms; animating layout on every pointer move drops frames on long lists.
transform: translateY(var(--row-delta));
transition: transform 200ms ease-out;Step the item onto the nearest guide instead of following the pointer continuously.
Snap in discrete jumps so the alignment stays visible; easing between cells makes the grid feel approximate.
transition: transform 90ms steps(1, end);Return the item to its origin when the destination refuses it.
Animate the return so the item is never simply gone, and say why the drop failed in text rather than color alone.
animation: return-home 280ms cubic-bezier(.34, 1.56, .64, 1);Scroll the container while the pointer rests against its edge during a drag.
Ramp the speed with distance into the edge zone, and stop the moment the pointer leaves it or the drag ends.
element.scrollBy({ top: edgeDepth * SCROLL_SPEED });Implementation check
Test keyboard focus, touch, reduced motion, slow work, failure, repeated activation, and the final resting state. A robust interaction remains understandable when every transition is removed.
@media (prefers-reduced-motion: reduce) {
.motion {
animation: none;
transform: none;
transition-duration: 0.01ms;
}
}Continue the reference
Compare the neighboring feedback patterns before choosing an effect.
Map the components and states around these interactions, then generate the project structure from one visual workspace.
We'd like to use Google cookies to understand how Nodlume is used and to measure our advertising. Nothing loads until you choose, and declining does not affect anything in the app.