1.5 KiB
1.5 KiB
Draggable
Control Functionality: A drag-only container widget. Child widgets can be dragged out into Droppable or Sortable containers, but it does not accept items dragged in from outside.
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". |
type |
string | (Optional) Drag item type identifier, used for accepts matching on Droppable. |
animation |
number | Animation duration in ms. Default: 150. |
Subwidget Structure
Each subwidget is a draggable item:
{
"widgettype": "Draggable",
"options": {"group": "mygroup"},
"subwidgets": [
{"widgettype": "Text", "options": {"text": "可拖拽项 1"}},
{"widgettype": "Text", "options": {"text": "可拖拽项 2"}}
]
}
Main Events
| Event | Description |
|---|---|
dragstart |
Drag started |
dragend |
Drag ended |
Event params: {item: DOM元素}
Example — 与 Droppable 配合
{
"widgettype": "Draggable",
"options": {"group": "demo", "type": "task"},
"subwidgets": [
{"widgettype": "VBox", "options": {"css": "task-card", "data-type": "task"},
"subwidgets": [{"widgettype": "Text", "options": {"text": "任务 A"}}]}
],
"binds": [{"event": "dragend", "actiontype": "script", "script": "console.log('Drag ended')"}]
}