+ );
+ }
+
+---
+
+This example also specifies handlers for four common events (not specific to Draggable):
+
+- `click`
+- `dxdragenter`
+- `dxdragleave`
+- `dxdrop`
+
+---
+
+##### jQuery
+
+To attach handlers to common events, call [Draggable.on()](/Documentation/ApiReference/UI_Components/dxDraggable/Methods/#onevents) as follows:
+
+
+ $(function() {
+ $("#note-1").dxDraggable({
+ group: 'cards',
+
+ // ...
+ }).on({
+ "click": handleClick,
+ "dxdragenter": handleDragEnter,
+ "dxdragleave": handleDragStop,
+ "dxdrop": handleDragStop,
+ });
+
+ // ...
+
+ function handleClick(e) {
+ changeZIndex($(e.currentTarget));
+ }
+
+ function handleDragEnter(e) {
+ e.target.classList.add('overlapped');
+ }
+
+ function handleDragStop(e) {
+ e.target.classList.remove('overlapped');
+ }
+ });
+
+##### Angular
+
+To attach handlers to common events, call the [on()](/Documentation/ApiReference/Common/Utils/events/#onelement_eventName_handler) utility method within [Draggable.onInitialized()](/Documentation/ApiReference/UI_Components/dxDraggable/Configuration/#onInitialized) as follows:
+
+
+
+
+
+
+
+
+
+ import { type DxDraggableTypes } from 'devextreme-angular/ui/draggable';
+ import { EventObject } from 'devextreme/common/core/events';
+ import { on } from "devextreme/events";
+
+ // ...
+ export class AppComponent {
+ handleClick(e: EventObject) {
+ this.changeZIndex(e.currentTarget as HTMLElement);
+ }
+
+ handleDragEnter(e: EventObject) {
+ const target: HTMLElement = e.target as HTMLElement;
+
+ target.classList.add('overlapped');
+ }
+
+ handleDragStop(e: EventObject) {
+ const target: HTMLElement = e.target as HTMLElement;
+
+ target.classList.remove('overlapped');
+ }
+
+ handleInit(e: DxDraggableTypes.InitializedEvent) {
+ on(e.element!, 'click', this.handleClick.bind(this));
+
+ on(e.element!, 'dxdragenter', this.handleDragEnter);
+
+ on(e.element!, 'dxdragleave', this.handleDragStop);
+ on(e.element!, 'dxdrop', this.handleDragStop);
+ }
+ }
+
+##### Vue
+
+To attach handlers to common events, call the [on()](/Documentation/ApiReference/Common/Utils/events/#onelement_eventName_handler) utility method within [Draggable.onInitialized()](/Documentation/ApiReference/UI_Components/dxDraggable/Configuration/#onInitialized) as follows:
+
+
+
+
+
+
+
+
+
+
+
+
+##### React
+
+To attach handlers to common events, call the [on()](/Documentation/ApiReference/Common/Utils/events/#onelement_eventName_handler) utility method within [Draggable.onInitialized()](/Documentation/ApiReference/UI_Components/dxDraggable/Configuration/#onInitialized) as follows:
+
+
+ import React, { JSX, useState, useCallback } from 'react';
+ import { Draggable, type DraggableTypes } from 'devextreme-react/draggable';
+ import { on } from 'devextreme/common/core/events';
+ import { type EventObject } from 'devextreme/common/core/events';
+
+ function App(): JSX.Element {
+ const handleClick = useCallback((e: EventObject) => {
+ changeZIndex(e.currentTarget as HTMLElement);
+ }, []);
+
+ const handleDragEnter = useCallback((e: EventObject) => {
+ const target: HTMLElement = e.target as HTMLElement;
+ target.classList.add('overlapped');
+ }, []);
+
+ const handleDragStop = useCallback((e: EventObject) => {
+ const target: HTMLElement = e.target as HTMLElement;
+ target.classList.remove('overlapped');
+ }, []);
+
+ const handleInit = useCallback((e: DraggableTypes.InitializedEvent) => {
+ on(e.element!, 'click', handleClick);
+ on(e.element!, 'dxdragenter', handleDragEnter);
+ on(e.element!, 'dxdragleave', handleDragStop);
+ on(e.element!, 'dxdrop', handleDragStop);
+ }, []);
+
+ return (
+
+
+
+ {/* ... */}
+
+ );
+ }
+
+---
+
+[note] Specify an identical [group](/Documentation/ApiReference/UI_Components/dxDraggable/Configuration/#group) value for all Draggable instances to ensure the components interact with each other (in `dxdragenter`, `dxdragleave`, and `dxdrop` handlers).