# Bortable (Component) `Bit.Bortable.Bortable` - inherits `ComponentBase` - implements `IAsyncDisposable`, `IComponent`, `IHandleAfterRender`, `IHandleEvent` A Blazor-native drag-and-drop sortable list, inspired by SortableJS. Reorder items within a list or drag them between lists that share a Bortable.Group. The sorting engine runs in C# on the browser's native drag events; the bit-bortable.js module only hit-tests, installs drag handles and plays the FLIP animations. Needs BitBortable.AddBitBortableServices. ## Parameter - **Animation** : `int` = `150` - Duration in milliseconds of the slide animation when items move to new positions, mirroring the SortableJS animation option. Set to 0 to disable animations. Default is 150. - **ChildContent** : `RenderFragment?` - Optional extra content rendered after the items (e.g. an empty-state placeholder). - **ChosenClass** : `string` = `"bit-bortable-chosen"` - Class applied to the chosen item. Default bit-bortable-chosen. - **Class** : `string?` - Extra CSS classes for the list container. - **Clone** : `Func?` - Factory used to copy an item when Bortable.Pull is BortablePull.Clone. - **Direction** : `BortableDirection` = `BortableDirection.Auto` - The axis to sort along. BortableDirection.Auto detects it from the layout; set it explicitly for grids. Mirrors the SortableJS direction option. - **Disabled** : `bool` = `false` - Disables all drag behaviour when true. - **Filter** : `Func?` - Predicate returning true for items that must not be dragged. The other items can still be dragged past a filtered item, which moves it along by one, so it does not pin an item to its index. - **GhostClass** : `string` = `"bit-bortable-ghost"` - Class applied to the item being dragged (and to the drop placeholder). Default bit-bortable-ghost. - **Group** : `string?` - Lists that share the same group name can exchange items. - **Handle** : `string?` - 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, links). - **Id** : `string` - Stable DOM id for the list. Auto-generated when not supplied. - **InvertedSwapThreshold** : `double` = `0` - The fraction (0–1) of an item used for the inverted swap zone. Defaults to Bortable.SwapThreshold when left at 0. Mirrors invertedSwapThreshold. - **InvertSwap** : `bool` = `false` - When true the swap zones sit at the item's edges instead of its centre, giving a "sort between items" feel. Mirrors the SortableJS invertSwap option. - **ItemClass** : `string?` - Base CSS class applied to every item wrapper. - **ItemClassSelector** : `Func?` - Optional per-item class selector. Its result is appended to each item's wrapper class, letting an item keep its own styling regardless of which list holds it. - **Items** : `IList?` - The list of items to display and reorder. Bind with @bind-Items. It must be a mutable list (e.g. List); a read-only one (such as an array) can only be dragged from in BortablePull.Clone mode. - **ItemsChanged** : `EventCallback>` - Raised when the bound list changes (supports @bind-Items). - **ItemTemplate** : `RenderFragment?` - Template rendered for each item. - **MultiDrag** : `bool` = `false` - 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. - **OnAdd** : `EventCallback>` - Raised on the destination list when an item is dropped in from another list. - **OnChange** : `EventCallback>` - Raised while dragging, each time the dragged item moves to a new position in this list. - **OnEnd** : `EventCallback>` - Raised on the source list when a drag ends, whatever its outcome - also when it ends before it was released, because the source list left the page or the browser never reported its end. - **OnRemove** : `EventCallback>` - Raised on the source list when an item is moved out to another list. - **OnSort** : `EventCallback>` - Raised on every list whose items changed (add, remove or update). - **OnStart** : `EventCallback>` - Raised on this list when a drag starts in it. - **OnUpdate** : `EventCallback>` - Raised when the order of this list changed within the list. - **Pull** : `BortablePull` = `BortablePull.Move` - Controls how items may be dragged out of this list. - **Put** : `bool` = `true` - Whether items from other lists in the group may be dropped here. - **SelectedClass** : `string` = `"bit-bortable-selected"` - Class applied to items that are part of the multi-drag selection. Mirrors the SortableJS selectedClass option. Default bit-bortable-selected. - **Sort** : `bool` = `true` - Allow reordering within this list. Set to false to only allow dragging out. - **Style** : `string?` - Inline styles for the list container. - **Swap** : `bool` = `false` - Enables the Swap plugin behaviour: instead of sorting, the dragged item trades places with the item it is dropped on. While dragging, the item under the pointer is highlighted with Bortable.SwapClass. Mirrors the SortableJS swap option. - **SwapClass** : `string` = `"bit-bortable-swap-highlight"` - Class applied to the item highlighted as the swap target while dragging in swap mode. Mirrors the SortableJS swapClass option. Default bit-bortable-swap-highlight. - **SwapThreshold** : `double` = `1` - The fraction (0–1) of an item that acts as its swap zone, mirroring the SortableJS swapThreshold option. With the default 1 the whole item swaps; a smaller value (e.g. 0.65) leaves a dead zone near each edge, so the pointer has to move further into an item before the dragged one swaps past it. ## Method - **DisposeAsync**() : `ValueTask` - Ends any drag this list is the source of, and leaves any other drag this list was part of.