Core Components

SnapSort models a drag-and-drop interface with two primitives: items represent the things that can move, and containers define where things can be placed.

Items Are Movable Elements

An Item is an UI element that can be dragged and placed in different locations.

Each item carries an itemId, which helps the library identify it even after it moves or its DOM representation mutates. The developer must keep that ID stable and unique for the item’s lifetime.

Containers Define Placement

A Container represents a region that can hold a set of items. Containers themselves are also considered an item, so it can be placed within other container as well. That means containers must also maintain an itemId.

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. Containers that need to exchange items must be descendants of that same root. Conversely, containers that should not exchange items should be kept disjoint as separate root containers.

Ghosts Represent Temporary Visuals

Ghosts act as a visual preview of where the item will be dropped. It is most commonly rendered as a shallow clone of the item it is supposed to represent, hence its name. In other cases though, ghost can behave differently depending on the mode you selected (covered in more detail in the next section).

Pointers

Although not a component per se, Pointers are an important concept in SnapSort. They represent the user’s input device that initiates the drag operation, usually a mouse or a touch contact.