mmo-boarding

1 symbol · generated 30 Sep 2026

element

mmo-boarding

Kanban board layout with drag & drop support.

<mmo-boarding></mmo-boarding>

Extends: CustomShadowElement

Items are slotted children distributed into columns via their `data-column-id` attribute. Usage: <mmo-boarding> <div data-column-id="todo">Task 1</div> <img data-column-id="doing" src="preview.png"> <mmo-widget data-column-id="done">Complex content</mmo-widget> </mmo-boarding> Columns are data-driven via the `columns` property. Items are DOM-driven: any child with `data-column-id` is placed in the matching column. Events: - 'item-move' : { element, fromColumnId, toColumnId, index } - 'column-move' : { order } - 'change' : fired after any item or column reorder

Index

	ViewDefault static readonly accessor
	columns accessor	Get the columns
	init()
	cleanDrag()	Clean the drag
	commitColumnOrder()	Commit a column order
	commitItemMove(el, toColumnId, insertIndex)	Commit an item move
	distributeItems(slot)	Move slotted elements into their target column body
	doRenderBoard()	Render the board
	getItemInsertPoint(body, y)	Get the item insert point
	placeItem(el)	Place a single element into its column body based on data-column-id
	renderBoard()	Render the board
	renderColumn(col)	Render a column
	setupItemDrag(el)	Attach drag & drop listeners to an item element
	sortItems(comparator)	Sort items within each column
	updateColumnCount(colId)	Update the column count
	(default)	the cards: any element carrying `data-column-id`, placed in the column of that id