{"hits":[{"kind":"Guide section","title":"Drag handles","tool":"GetBortableGuideSection(heading: \"Drag handles\")","snippet":"## Drag handles  `Handle` is a CSS selector: with it, an item starts a drag only when it is pressed on an element matching the selector inside it, and the rest of the item keeps it..."},{"kind":"Guide section","title":"Native drag events","context":"How it works","tool":"GetBortableGuideSection(heading: \"Native drag events\")","snippet":"### Native drag events  Each item wrapper is `draggable`, and the component handles `dragstart`, `dragover`, `drop` and `dragend` in C#. The handlers of every list are serialized t..."},{"kind":"Guide section","title":"Drag-state classes","context":"Styling","tool":"GetBortableGuideSection(heading: \"Drag-state classes\")","snippet":"### Drag-state classes  | Class | Set on | | --- | --- | | `bit-bortable` | The list container. | | `bit-bortable-item` | Every item wrapper, and the drop placeholder. | | `bit-bor..."},{"kind":"CSS class","title":"bit-bortable-has-handle","context":"bit-bortable.css","tool":"GetBortableTheme(name: \"bit-bortable-has-handle\")","snippet":"...r of a list with a `Handle`. With a Handle, only the handle drags: the rest of the item behaves normally. :where(.bit-bortable-has-handle) > .bit-bortable-item, :where(.bit-bortabl..."},{"kind":"Drag lab","title":"Inspect a Bortable drag","tool":"InspectBortableDrag()","snippet":"Runs real Bortable lists described as JSON through one drag - a reorder, a move or clone between lists, a swap or a multi-drag - by dispatching dragstart, dragover, drop and dragen..."},{"kind":"API parameter","title":"Bortable<TItem>.Handle","context":"Bortable<TItem>","tool":"GetBortableApi(typeName: \"Bortable<TItem>\")","snippet":"CSS selector for a drag handle within each item. With a handle only the handle starts a drag, and the rest of the item keeps its normal pointer behaviour (text selection, inputs, l..."},{"kind":"Guide section","title":"Multi-drag","tool":"GetBortableGuideSection(heading: \"Multi-drag\")","snippet":"## Multi-drag  `MultiDrag=\"true\"` lets several items move as one - the SortableJS MultiDrag plugin. A click toggles an item's selection (highlighted with `SelectedClass`, default `..."},{"kind":"API parameter","title":"Bortable<TItem>.MultiDrag","context":"Bortable<TItem>","tool":"GetBortableApi(typeName: \"Bortable<TItem>\")","snippet":"Enables the MultiDrag plugin behaviour: click items to select several, then drag any one of them to move the whole selection together. Mirrors the SortableJS multiDrag option."},{"kind":"Guide section","title":"How it works","tool":"GetBortableGuideSection(heading: \"How it works\")","snippet":"## How it works  ### Native drag events  Each item wrapper is `draggable`, and the component handles `dragstart`, `dragover`, `drop` and `dragend` in C#. The handlers of every list..."},{"kind":"Guide section","title":"Events","tool":"GetBortableGuideSection(heading: \"Events\")","snippet":"...nt | Raised when | On | | --- | --- | --- | | `OnStart` | A drag begins. | The source list. | | `OnChange` | The dragged item changes position during the drag. | The list it moves..."},{"kind":"Guide section","title":"Getting started","tool":"GetBortableGuideSection(heading: \"Getting started\")","snippet":"...egisters one scoped service, the coordinator that holds the drag in progress so that lists sharing a group can hand an item to each other. Scoped means one per circuit on Blazor Se..."},{"kind":"Source file","title":"Demo/Client/Pages/HandleDemo.razor","context":"Page","tool":"GetBortableSourceFile(path: \"Demo/Client/Pages/HandleDemo.razor\")","snippet":"With Handle=\".handle\" a row can only be dragged by grabbing the handle icon."}],"hasMore":true}