Vue Scheduler - appointmentDragging

Configures appointment reordering using drag and drop gestures.

Selector: DxAppointmentDragging
Type:

Object

autoScroll

Enables automatic scrolling while dragging an appointment beyond the viewport.

Selector: auto-scroll
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.

Selector: @add
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 an EventObject 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.

Selector: @drag-end
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 an EventObject or a jQuery.Event when you use jQuery.

fromComponent

Sortable

|

Draggable

The instance of the appointment's source UI component. Works only for element drag and drop between components.

fromData any

Custom data associated with the source UI component. Works only for element drag and drop between components.

itemData any

The appointment's data before the drag operation

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. Works only for element drag and drop between components.

toData any

Custom data associated with the target UI component. Works only for element drag and drop between components.

toItemData any

The appointment's data after dragging.

onDragMove

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

Selector: @drag-move
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 an EventObject or a jQuery.Event when you use jQuery.

fromComponent

Sortable

|

Draggable

The instance of the appointment's source UI component. Works only for element drag and drop between components.

fromData any

Custom data associated with the source UI component. Works only for element drag and drop between components.

itemData any

The appointment's data before the drag operation.

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. Works only for element drag and drop between components.

toData any

Custom data associated with the target UI component. Works only for element drag and drop between components.

onDragStart

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

Selector: @drag-start
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 an EventObject or a jQuery.Event when you use jQuery.

fromData any

Custom data associated with the source UI component. Works only for element drag and drop between components.

itemData any

The appointment's data before the drag operation.

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.

Selector: @remove
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 an EventObject 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.

Selector: scroll-sensitivity
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.

Selector: scroll-speed
Type:

Number

Default Value: 60

See Also