TaskDrag
Feature

This feature allows cards on the TaskBoard to be dragged across swimlanes and columns but also vertically in the same column to change the order:

When a task is dropped, its columnField, swimlaneField and/or weight fields are updated to reflect the new location.

Note that when moving a task to a catch-all column (a column with id *), the task's field will be set to null.

Drag events

The different stages of a drag operation trigger different events, in order of appearance:

Event	Description
beforeTaskDrag	Preventable event fired before a drag starts
taskDragStart	Fired when dragging starts
taskDrag	Fired when movement during a drag will lead to changes
beforeTaskDrop	Preventable event fired before finalizing a valid drop. Allows async listeners
taskDrop	Fired after finalizing a valid drop
taskDragAbort	Fired when a drag is aborted (ESC, drop out of bounds or by a listener)
taskDragEnd	Fired when a started drag ends, no matter the outcome

The beforeTaskDrop is useful for example to request user confirmation for a drop:

This feature is enabled by default.

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

dragTouchStartDelay : Number300

The number of milliseconds that must elapse after a touchstart event before it is considered a drag. If movement occurs before this time, the drag is aborted. This is to allow touch swipes and scroll gestures.
reorderTaskRecords : Booleanfalse

Specify true to enable the old behavior of moving tasks in the store on drop.

This behaviour was made opt in since it does not play well when sharing data with other components.

If you are sorting tasks by a field other than `weight` and want predictable results on drop, you should enable this config.

Properties

Properties are getters/setters or publicly accessible variables on this class

isTaskDrag : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of TaskDrag class, or subclass thereof.

isDragging : Boolean

READONLY

Returns true if a drag operation is active
isTaskDrag : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TaskDrag class, or subclass thereof.

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeTaskDrag

PREVENTABLE

ON-OWNER

Fires on the owning TaskBoard before task dragging starts. Return false to prevent the action

Note that this event is triggered on the owning widget:

beforeTaskDrop

ASYNC

PREVENTABLE

ON-OWNER

Fires on the owning TaskBoard when tasks are dropped, before the operation completes. Handles async listeners, returning false from one will abort the operation

const taskBoard = new TaskBoard({
   listeners : {
       async beforeTaskDrop({ taskRecords, targetColumn }) {
           // Show confirmation dialog
           const result = await MessageDialog.confirm({
               title   : 'Verify drop',
               message : `Please confirm moving ${taskRecords.map(t => `"${t.name}"`).join(', ')} to ${targetColumn.text}?`
           });

           // Returning false will abort the drop (if user pressed Cancel)
           return result === MessageDialog.okButton;
       }
   }
});

Note that this event is triggered on the owning widget:

taskDrag

ON-OWNER

Fires on the owning TaskBoard when tasks are dragged, if the drag leads to any changes compared to the last taskDrag event (moved to a new column or changed order within a column).

Returning false from a listener will flag the drag as invalid (by default turning the drop indicator red)

Note that this event is triggered on the owning widget:
taskDragAbort

ON-OWNER

Fires on the owning TaskBoard when a drag operation is aborted (invalid drop or aborted using ESC)

Note that this event is triggered on the owning widget:
taskDragEnd

ON-OWNER

Fires on the owning TaskBoard when a previously started drag operation ends, no matter the outcome of it (whether valid, invalid or aborted)

Note that this event is triggered on the owning widget:
taskDragStart

ON-OWNER

Fires on the owning TaskBoard when task dragging starts

Note that this event is triggered on the owning widget:
taskDrop

ON-OWNER

Fires on the owning TaskBoard when tasks are successfully dropped (after the drop transition has finished)

Note that this event is triggered on the owning widget:

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeTaskDrag

PREVENTABLE

ON-OWNER

Called on the owning TaskBoard before task dragging starts. Return false to prevent the action

Note that this handler is called on the owning widget:

onBeforeTaskDrop

ASYNC

PREVENTABLE

ON-OWNER

Called on the owning TaskBoard when tasks are dropped, before the operation completes. Handles async listeners, returning false from one will abort the operation

const taskBoard = new TaskBoard({
   listeners : {
       async beforeTaskDrop({ taskRecords, targetColumn }) {
           // Show confirmation dialog
           const result = await MessageDialog.confirm({
               title   : 'Verify drop',
               message : `Please confirm moving ${taskRecords.map(t => `"${t.name}"`).join(', ')} to ${targetColumn.text}?`
           });

           // Returning false will abort the drop (if user pressed Cancel)
           return result === MessageDialog.okButton;
       }
   }
});

Note that this handler is called on the owning widget:

onTaskDrag

ON-OWNER

Called on the owning TaskBoard when tasks are dragged, if the drag leads to any changes compared to the last taskDrag event (moved to a new column or changed order within a column).

Returning false from a listener will flag the drag as invalid (by default turning the drop indicator red)

Note that this handler is called on the owning widget:
onTaskDragAbort

ON-OWNER

Called on the owning TaskBoard when a drag operation is aborted (invalid drop or aborted using ESC)

Note that this handler is called on the owning widget:
onTaskDragEnd

ON-OWNER

Called on the owning TaskBoard when a previously started drag operation ends, no matter the outcome of it (whether valid, invalid or aborted)

Note that this handler is called on the owning widget:
onTaskDragStart

ON-OWNER

Called on the owning TaskBoard when task dragging starts

Note that this handler is called on the owning widget:
onTaskDrop

ON-OWNER

Called on the owning TaskBoard when tasks are successfully dropped (after the drop transition has finished)

Note that this handler is called on the owning widget:

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-task-board-task-drag-card-box-shadow	Dragged cards box shadow
--b-task-board-task-drag-card-transform	Dragged cards transform (slight rotation by default)
--b-task-board-task-drag-drop-background	Drop indicator background
--b-task-board-task-drag-drop-border	Drop indicator border
--b-task-board-task-drag-invalid-background	Invalid drop indicator background
--b-task-board-task-drag-invalid-color	Invalid drop indicator border color

TaskDrag
Feature

Drag events

Configs

Properties

Events

Event handlers

CSS variables

Source path

Inheritance tree4

Mixins2

Contents

TaskDrag Feature

Drag events

Configs

Properties

Events

Event handlers

CSS variables

Source path

Inheritance tree4

Mixins2

Contents

TaskDrag
Feature