53 lines
1.5 KiB
Markdown
53 lines
1.5 KiB
Markdown
# 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:
|
|
|
|
```json
|
|
{
|
|
"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 配合
|
|
|
|
```json
|
|
{
|
|
"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')"}]
|
|
}
|
|
```
|