/** * DevExtreme (ui/draggable.d.ts) * Version: 21.1.7 * Build date: Thu Aug 07 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import DOMComponent, { DOMComponentOptions, } from '../core/dom_component'; import { UserDefinedElement, DxElement, } from '../core/element'; import { template, } from '../core/templates/template'; import { Cancelable, EventInfo, NativeEventInfo, InitializedEventInfo, ChangedOptionInfo, } from '../events/index'; import dxSortable from './sortable'; /** * @namespace DevExpress.ui */ export interface DraggableBaseOptions extends DOMComponentOptions { /** * @docid * @default true * @public */ autoScroll?: boolean; /** * @docid * @default undefined * @public */ boundary?: string | UserDefinedElement; /** * @docid * @default undefined * @public */ container?: string | UserDefinedElement; /** * @docid * @public */ cursorOffset?: string | { /** * @docid * @default 0 */ x?: number; /** * @docid * @default 0 */ y?: number; }; /** * @docid * @default undefined * @public */ data?: any; /** * @docid * @type Enums.DragDirection * @default "both" * @public */ dragDirection?: 'both' | 'horizontal' | 'vertical'; /** * @docid * @default undefined * @public */ group?: string; /** * @docid * @default "" * @public */ handle?: string; /** * @docid * @default 60 * @public */ scrollSensitivity?: number; /** * @docid * @default 30 * @public */ scrollSpeed?: number; } /** * @docid * @inherits DOMComponent * @export default * @hidden * @namespace DevExpress.ui */ // eslint-disable-next-line @typescript-eslint/no-empty-interface export interface DraggableBase { } /** @public */ export type DisposingEvent = EventInfo; /** @public */ export type DragEndEvent = Cancelable & NativeEventInfo & { readonly itemData?: any; readonly itemElement?: DxElement; readonly fromComponent: dxSortable | dxDraggable; readonly toComponent: dxSortable | dxDraggable; readonly fromData?: any; readonly toData?: any; }; /** @public */ export type DragMoveEvent = Cancelable & NativeEventInfo & { readonly itemData?: any; readonly itemElement?: DxElement; readonly fromComponent: dxSortable | dxDraggable; readonly toComponent: dxSortable | dxDraggable; readonly fromData?: any; readonly toData?: any; }; /** @public */ export type DragStartEvent = Cancelable & NativeEventInfo & { itemData?: any; readonly itemElement?: DxElement; readonly fromData?: any; }; /** @public */ export type InitializedEvent = InitializedEventInfo; /** @public */ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; /** @public */ export type DragTemplateData = { readonly itemData?: any; readonly itemElement: DxElement; }; /** * @deprecated use Properties instead * @namespace DevExpress.ui */ export interface dxDraggableOptions extends DraggableBaseOptions { /** * @docid * @default false * @public */ clone?: boolean; /** * @docid * @type_function_param1 dragInfo:object * @type_function_param1_field1 itemData:any * @type_function_param1_field2 itemElement:DxElement * @type_function_return string|Element|jQuery * @default undefined * @public */ dragTemplate?: template | ((dragInfo: DragTemplateData, containerElement: DxElement) => string | UserDefinedElement); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxDraggable * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 event:event * @type_function_param1_field5 cancel:boolean * @type_function_param1_field6 itemData:any * @type_function_param1_field7 itemElement:DxElement * @type_function_param1_field8 fromComponent:dxSortable|dxDraggable * @type_function_param1_field9 toComponent:dxSortable|dxDraggable * @type_function_param1_field10 fromData:any * @type_function_param1_field11 toData:any * @action * @public */ onDragEnd?: ((e: DragEndEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxDraggable * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 event:event * @type_function_param1_field5 cancel:boolean * @type_function_param1_field6 itemData:any * @type_function_param1_field7 itemElement:DxElement * @type_function_param1_field8 fromComponent:dxSortable|dxDraggable * @type_function_param1_field9 toComponent:dxSortable|dxDraggable * @type_function_param1_field10 fromData:any * @type_function_param1_field11 toData:any * @action * @public */ onDragMove?: ((e: DragMoveEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field1 component:dxDraggable * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @type_function_param1_field4 event:event * @type_function_param1_field5 cancel:boolean * @type_function_param1_field6 itemData:any * @type_function_param1_field7 itemElement:DxElement * @type_function_param1_field8 fromData:any * @action * @public */ onDragStart?: ((e: DragStartEvent) => void); } /** * @docid * @inherits DraggableBase * @hasTranscludedContent * @namespace DevExpress.ui * @public */ export default class dxDraggable extends DOMComponent implements DraggableBase { constructor(element: UserDefinedElement, options?: dxDraggableOptions) } /** @public */ export type Properties = dxDraggableOptions; /** @deprecated use Properties instead */ export type Options = dxDraggableOptions; /** @deprecated use Properties instead */ export type IOptions = dxDraggableOptions;