Vue Scheduler - appointmentDragging

Configures appointment reordering using drag and drop gestures.

Type:

Object

autoScroll

Enables automatic scrolling while dragging an appointment beyond the viewport.

Type:

Boolean

Default Value: true

data

A container for custom data.

Type: any
Default Value: undefined

group

Allows you to group several UI components so that users can drag and drop appointments between them.

Type:

String

Default Value: undefined

Set this property to identical values for the UI components you want to collect in a single group.

View Demo

onAdd

A function that is called when a new appointment is added.

Type:

Function

Function parameters:
e:

Object

Information about the event that caused the function's execution.

Object structure:
Name Type Description
component

Scheduler

The UI component's instance.

event

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

fromComponent

Sortable

|

Draggable

The instance of the appointment's source UI component.

fromData any

Custom data associated with the source UI component.

itemData any

The data object of the appointment being dragged.

itemElement

HTMLElement | jQuery

The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.

toComponent

Sortable

|

Draggable

The instance of the appointment's target UI component.

toData any

Custom data associated with the target UI component.

onDragEnd

A function that is called when the dragged appointment's position is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event that caused the function's execution.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture.

component

Scheduler

The UI component's instance.

event

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

fromComponent

Sortable

|

Draggable

The instance of the appointment's source UI component.

fromData any

Custom data associated with the source UI component.

itemData any

The dragged appointment's data.

itemElement

HTMLElement | jQuery

The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.

toComponent

Sortable

|

Draggable

The instance of the appointment's target UI component.

toData any

Custom data associated with the target UI component.

onDragMove

A function that is called every time a draggable appointment is moved.

Type:

Function

Function parameters:
e:

Object

Information about the event that caused the function's execution.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture.

component

Scheduler

The UI component's instance.

event

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

fromComponent

Sortable

|

Draggable

The instance of the appointment's source UI component.

fromData any

Custom data associated with the source UI component.

itemData any

The data object of the appointment being dragged.

itemElement

HTMLElement | jQuery

The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.

toComponent

Sortable

|

Draggable

The instance of the appointment's target UI component.

toData any

Custom data associated with the target UI component.

onDragStart

A function that is called when the drag gesture is initialized.

Type:

Function

Function parameters:
e:

Object

Information about the event that caused the function's execution.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel the gesture.

component

Scheduler

The UI component's instance.

event

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

fromData any

Custom data associated with the source UI component.

itemData any

The data object of the appointment being dragged.

itemElement

HTMLElement | jQuery

The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.

onRemove

A function that is called when a draggable appointment is removed.

Type:

Function

Function parameters:
e:

Object

Information about the event that caused the function's execution.

Object structure:
Name Type Description
component

Scheduler

The UI component's instance.

event

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

fromComponent

Sortable

|

Draggable

The instance of the appointment's source UI component.

fromData any

Custom data associated with the source UI component.

itemData any

The data object of the appointment being dragged.

itemElement

HTMLElement | jQuery

The container of the item being dragged. It is an HTML Element or a jQuery Element when you use jQuery.

toComponent

Sortable

|

Draggable

The instance of the appointment's target UI component.

scrollSensitivity

Specifies the distance in pixels from the edge of viewport at which scrolling should start. Applies only if autoScroll is true.

Type:

Number

Default Value: 60

See Also

scrollSpeed

Specifies the scrolling speed when dragging an appointment beyond the viewport. Applies only if autoScroll is true.

Type:

Number

Default Value: 60

See Also