Vue Draggable Props

This section describes properties that configure the Draggable UI component's contents, behavior, and appearance.

autoScroll

Enables automatic scrolling while dragging an item beyond the viewport.

Selector: auto-scroll
Type:

Boolean

Default Value: true

boundary

Specifies a DOM element that limits the dragging area.

Default Value: undefined

This property accepts the following value types:

  • String
    A CSS selector. For example: "#elementId".
  • DOM Node
    An HTML DOM element. For example: document.getElementById("elementId").
  • jQuery
    A CSS selector wrapped in a jQuery element. For example: $("#elementId").

clone

Allows a user to drag clones of items instead of actual items.

Type:

Boolean

Default Value: false

container

Specifies a custom container in which the draggable item should be rendered.

Default Value: undefined

This property accepts the following value types:

  • String
    A CSS selector. For example: "#elementId".
  • DOM Node
    An HTML DOM element. For example: document.getElementById("elementId").
  • jQuery
    A CSS selector wrapped in a jQuery element. For example: $("#elementId").

cursorOffset

Specifies the cursor offset from the dragged item.

Selector: DxCursorOffset
Type:

String

|

Object

data

A container for custom data.

Type: any
Default Value: undefined

dragDirection

Specifies the directions in which an item can be dragged.

Selector: drag-direction
Type:

String

Default Value: 'both'
Accepted Values: 'both' | 'horizontal' | 'vertical'

dragTemplate

Specifies custom markup to be shown instead of the item being dragged.

Selector: drag-template
Type:

template

Template Data:
Name Type Description
itemData any

The item'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.

Default Name: undefined

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Selector: DxElementAttr
Type:

Object

Default Value: {}

App.vue
  • <template>
  • <DxDraggable ...
  • :element-attr="draggableAttributes">
  • </DxDraggable>
  • </template>
  •  
  • <script>
  • import DxDraggable from 'devextreme-vue/draggable';
  •  
  • export default {
  • components: {
  • DxDraggable
  • },
  • data() {
  • return {
  • draggableAttributes: {
  • id: 'elementId',
  • class: 'class-name'
  • }
  • }
  • }
  • }
  • </script>

group

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

Type:

String

Default Value: undefined

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

handle

Specifies a CSS selector (ID or class) that should act as the drag handle(s) for the item(s).

Type:

String

Default Value: ''

height

Specifies the UI component's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The UI component's height.

Default Value: undefined

This property accepts a value of one of the following types:

  • Number
    The height in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

  • Function (deprecated since v21.2)
    Refer to the W0017 warning description for information on how you can migrate to viewport units.

onDisposing

A function that is executed before the UI component is disposed of.

Selector: @disposing
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component Draggable

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model any

Model data. Available only if you use Knockout.

Default Value: null

onDragEnd

A function that is called when drag gesture is finished.

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

Draggable

The UI component that raised the event.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

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 item's source UI component.

fromData any

Custom data associated with the source UI component.

itemData any

The dragged item'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.

model any

Model data. Available only if you use Knockout.

toComponent

Sortable

|

Draggable

The instance of the item's target UI component.

toData any

Custom data associated with the target UI component.

Default Value: null

onDragMove

A function that is called every time a draggable item 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

Draggable

The UI component that raised the event.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

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 item's source UI component.

fromData any

Custom data associated with the source UI component.

itemData any

The dragged element'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.

model any

Model data. Available only if you use Knockout.

toComponent

Sortable

|

Draggable

The instance of the item's target UI component.

toData any

Custom data associated with the target UI component.

Default Value: null

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

Draggable

The UI component that raised the event.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

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.

itemData any

The dragged item'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.

model any

Model data. Available only if you use Knockout.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Selector: @initialized
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component Draggable

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

onOptionChanged

A function that is executed after a UI component property is changed.

Selector: @option-changed
Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
model any

Model data. Available only if you use Knockout.

fullName

String

The path to the modified property that includes all parent properties.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

component Draggable

The UI component's instance.

name

String

The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.

value any

The modified property's new value.

Default Value: null

The following example shows how to subscribe to component property changes:

App.vue
  • <template>
  • <DxDraggable ...
  • @option-changed="handlePropertyChange"
  • />
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  • import DxDraggable from 'devextreme-vue/draggable';
  •  
  • export default {
  • components: {
  • DxDraggable
  • },
  • // ...
  • methods: {
  • handlePropertyChange: function(e) {
  • if(e.name === "changedProperty") {
  • // handle the property change here
  • }
  • }
  • }
  • }
  • </script>

rtlEnabled

Switches the UI component to a right-to-left representation.

Selector: rtl-enabled
Type:

Boolean

Default Value: false

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
  • DevExpress.config({
  • rtlEnabled: true
  • });

DataGrid Demo Navigation UI Demo Editors Demo

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 item beyond the viewport. Applies only if autoScroll is true.

Selector: scroll-speed
Type:

Number

Default Value: 30

See Also

width

Specifies the UI component's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The UI component's width.

Default Value: undefined

This property accepts a value of one of the following types:

  • Number
    The width in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

  • Function (deprecated since v21.2)
    Refer to the W0017 warning description for information on how you can migrate to viewport units.