bricks/docs/en/draggable.md

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')"}]
}