Sortable Container

A container component that allows items to be reordered through drag and drop interactions, providing an intuitive way to organize and arrange content dynamically.

Basic Sortable Container

Create a standard sortable container that allows items to be reordered via drag and drop.

Preview Code
Item 1
Item 2
Item 3
php
Sortable Container Options
The Sortable Container component provides various customization options.
  • Method-based configuration instead of predefined constants
  • Support for different layouts (vertical, horizontal)
  • List group styling and custom styling options
  • Drag handle specification for more precise control
  • Server-side ordering with event callbacks
  • Item cloning and sharing between containers
Sortable Container Examples
Here are examples of different sortable container options and styles.

List Group Sortable Container

Create a sortable container styled as a Bootstrap list group using the listGroup() method.

Preview Code
Item 1
Item 2
Item 3
php

Horizontal Sortable Container

Create a sortable container with horizontal layout using the horizontal() method.

Preview Code
Item 1
Item 2
Item 3
php

Disabled Sortable Container

Create a sortable container with sorting disabled using the disabled() method.

Preview Code
Item 1
Item 2
Item 3
php

Sortable Container with Drag Handles

Create a sortable container where items can only be dragged using handle elements with the handle() method.

Preview Code
☰
Item 1
☰
Item 2
php

Sortable Container with Server-Side Ordering

Create a sortable container that sends the new order to the server on change using the onDragEnd() method.

Preview Code
php

Sortable Container with Custom JavaScript Options

Create a sortable container with custom SortableJS options by directly setting properties on the sortableJSOptions array.

Preview Code
Item 1
Item 2
Item 3
php

API

The Sortable Container component provides methods for creating and configuring sortable containers.
API PHP
API JS

Events

You can listen to events on the GridJS component using the boui on() method.

Common alternative names: Draggable Container, Drag and Drop List, Sortable List, Reorderable Container, Drag and Drop Container, Reorderable List, SortableJS Container

Types: Vertical Containers, Horizontal Containers, List Group Containers, Handle Containers, Shared Group Containers, Disabled Containers

Principles

User Interaction

Sortable containers provide intuitive drag and drop interactions for content organization, allowing users to visually reorder items without complex forms or controls.

Visual Feedback

The component provides immediate visual feedback during drag operations with placeholder and ghost elements, helping users understand the expected outcome of their actions.

Server Synchronization

Changes to the order of items can be automatically sent to the server, ensuring that the user interface reflects the actual state of the data.

Anatomy

Sortable Container Anatomy
  1. Container

    2. The outer wrapper that holds all sortable items

  2. Items

    3. Individual draggable elements with unique keys

  3. Handles

    4. Specific elements within items that users must use to drag

  4. Placeholder

    5. Visual indication of where an item will be placed during dragging

Usage

Use sortable containers for interactive content organization. They're particularly effective for:

  • Admin interfaces for ordering content
  • User-customizable dashboards
  • Priority-based task lists
  • Custom menu builders
  • Image gallery organization
  • Workflow configuration
  • Form field reordering