SnapSort models a drag-and-drop interface with two primitives: containers define where things can be placed, and items represent the things that can move.
Items Are Movable Elements
An Item is an UI element that can be dragged and placed in different locations.
Each item carries a globally unique itemId, which helps the library identify
items even after they get moved around. itemId must be defined by the developer,
and be consistent and unique for an item throughout its lifetime. This becomes
essential in frontend frameworks which can completely destroy and recreate an items’
DOM element and component as it gets moved around, making itemId the last bastion of identity.
Containers Define Placement
A Container represents a region that can hold an ordered set of items.
Containers themselves are also considered an item, so it can be placed within
other container as well. That also means containers must also maintain an itemId.
In addition, containers can optionally carry a groupID.
Containers with different groups are isolated from one another,
meaning an item in a container with one group ID cannot be dragged into
a container with a different group ID.
For every drag-and-drop interface, there is always a single root container that serves as the top-level parent for all draggable items and containers. Root containers must never be destroyed during the lifetime of the application, since they are responsible for maintaining the state of the entire drag-and-drop system.
Ghosts Are Placeholders
When an item is dragged, any potential location the item can be dropped is temporarily filled with a ghost to maintain the layout structure. This both preserves the layout and provides visual feedback on where the item can be dropped.
Every Move Is a Session
A DragSession is the temporary state SnapSort creates for one drag gesture.
It lives on the root container while the drag is active and keeps track of
the drag-and-drop life cycle.
A session has three visible stages:
- Drag start. The item still belongs to its original container, but it is taken out of the normal layout and moved with the pointer using absolute positioning. A ghost temporarily occupies the item’s original position so the surrounding layout does not collapse.
- Moving. As the pointer moves, SnapSort resolves a prospective index and container. The ghost moves to preview that location—even in another container—while the real item remains attached to its original container for the duration of the drag.
- Drop. When the pointer is released, the move is committed. The item officially moves to the ghost’s location, the ghost is destroyed, normal positioning is restored, and the drag session ends.