JavaScript/jQuery Draggable Options

Element

jQuery

Default Value: undefined

This option 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.

Type:

data

A container for custom data.

Type: any

Default Value: undefined

dragComponent

An alias for the dragTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

dragDirection

Specifies the directions in which an item can be dragged.

Type:

Default Value: 'both'

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

dragRender

An alias for the dragTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

dragTemplate

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

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.

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 attributes to be attached to the widget's root element.

Type:

Default Value: {}

jQuery

$(function(){
    $("#draggableContainer").dxDraggable({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-draggable ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-draggable>

import { DxDraggableModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxDraggableModule
    ],
    // ...
})

Vue

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>

React

App.js

import React from 'react';

import Draggable from 'devextreme-react/draggable';

class App extends React.Component {
    draggableAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Draggable ...
                elementAttr={this.draggableAttributes}>
            </Draggable>
        );
    }
}
export default App;

group

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

Type:

Default Value: undefined

Set this option to identical values for the widgets 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:

Default Value: ''

height

Specifies the widget's height.

Type:

Return Value:

The widget's height.

Default Value: undefined

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

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".
Function
A function returning either of the above. For example:
JavaScript
```
height: function() {
    return window.innerHeight / 1.5;
}
```

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function parameters:

Information about the event.

Object structure:

Name	Type	Description
component	Draggable	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	Object	Model data. Available only if you use Knockout.

Name

Type

Description

component

Draggable

The widget's instance.

element

HTMLElement | jQuery

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

model

Model data. Available only if you use Knockout.

Default Value: null

onDragEnd

A function that is called when drag gesture is finished.

Type:

Function parameters:

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 widget that raised the event.
element	HTMLElement \| jQuery	The widget'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 a dxEvent or a jQuery.Event when you use jQuery.
fromComponent	Sortable \| Draggable	The instance of the item's source widget.
fromData	any	Custom data associated with the source widget.
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	Object	Model data. Available only if you use Knockout.
toComponent	Sortable \| Draggable	The instance of the item's target widget.
toData	any	Custom data associated with the target widget.

Default Value: null

onDragMove

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

Type:

Function parameters:

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 widget that raised the event.
element	HTMLElement \| jQuery	The widget'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 a dxEvent or a jQuery.Event when you use jQuery.
fromComponent	Sortable \| Draggable	The instance of the item's source widget.
fromData	any	Custom data associated with the source widget.
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	Object	Model data. Available only if you use Knockout.
toComponent	Sortable \| Draggable	The instance of the item's target widget.
toData	any	Custom data associated with the target widget.

Default Value: null

onDragStart

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

Type:

Function parameters:

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 widget that raised the event.
element	HTMLElement \| jQuery	The widget'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 a dxEvent or a jQuery.Event when you use jQuery.
fromData	any	Custom data associated with the source widget.
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	Object	Model data. Available only if you use Knockout.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the widget instance.

Type:

Function parameters:

Information about the event.

Object structure:

Name	Type	Description
component	Draggable	The widget's instance.
element	HTMLElement \| jQuery	The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

Name

Type

Description

component

Draggable

The widget's instance.

element

HTMLElement | jQuery

The widget'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 widget option is changed.

Type:

Function parameters: