Utilities

Drag Scroll

Scroll a wide box by dragging it with the mouse. Buttons and links inside stay clickable, and no click fires after a drag.

Part of @tectra-ng/utils (npm install @tectra-ng/utils, also included in tectra-ng).

Features2

API

Theming

Basic

Grab the board and drag it sideways; the buttons on the cards still work.

Backlog

Ready

In progress

Review

Testing

Done

Archived

Last clicked: —

16 lines

<div class="stack wide">  <div class="board" txDragScroll>    @for (column of columns; track column) {      <tx-card class="column" [title]="column">        <button          txButton          label="Add card"          size="small"          severity="secondary"          (click)="last.set(column)"        ></button>      </tx-card>    }  </div>  <span class="hint">Last clicked: {{ last() || '—' }}</span></div>

Pan

In pan mode the directive reports the movement — here it moves a dot on a canvas.