bricks/docs/en/sortable.md

Sortable

Control Functionality: A bidirectional sortable container widget. Child widgets can be dragged out to other containers (Droppable/Sortable), can accept items dragged from outside, and also supports internal reordering within the container. Type: Basic Control Parent Control: bricks.Layout Dependency: SortableJS (Sortable.min.js)

Initialization Parameters

Parameter	Type	Description
group	string	Group name. Only containers sharing the same group can exchange items. Default: "default".
animation	number	Animation duration in ms. Default: 150.
handle	string	(Optional) CSS selector for the drag handle. Only matching elements can initiate dragging.

Main Events

Event	Description
dragstart	Drag started
dragend	Drag ended（含 from/to 容器信息）
dropadd	An item was dropped into this container from outside
dropremove	An item was dragged out of this container
reorder	The order within this container changed

Example — 任务看板列

{
  "widgettype": "Sortable",
  "options": {"group": "kanban", "animation": 150},
  "subwidgets": [
    {"widgettype": "VBox", "options": {"css": "task-card", "data-type": "task"},
     "subwidgets": [{"widgettype": "Text", "options": {"text": "待办 1"}}]},
    {"widgettype": "VBox", "options": {"css": "task-card", "data-type": "task"},
     "subwidgets": [{"widgettype": "Text", "options": {"text": "待办 2"}}]}
  ],
  "binds": [
    {"event": "reorder", "actiontype": "script",
     "script": "console.log('排序已改变')"},
    {"event": "dropadd", "actiontype": "script",
     "script": "console.log('新任务拖入')"}
  ]
}

Comparison

Widget	pull	put	file drop	internal sort
Draggable	✅	❌	❌	❌
Droppable	❌	✅	✅	❌
Sortable	✅	✅	❌	✅