From 0e9458691ade73663cccdf23dcfe50f27962a45d Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 26 Dec 2025 08:54:38 +0400 Subject: [PATCH 01/13] Draggable: Add Getting Started --- .../00 Getting Started with Draggable.md | 15 +++ .../05 Create Draggable.md | 96 +++++++++++++++++++ .../10 Handle Events.md | 1 + .../15 Configure Draggable Options.md | 1 + 4 files changed, 113 insertions(+) create mode 100644 concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md create mode 100644 concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md create mode 100644 concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Handle Events.md create mode 100644 concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Configure Draggable Options.md diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md new file mode 100644 index 0000000000..30ecb78cfc --- /dev/null +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md @@ -0,0 +1,15 @@ +#include tutorials-intro-installationnote + +This tutorial guides you through the following steps: + +- Add a Draggable to a page. +- Handle events (common events and events specific to Draggable). +- Configure Draggable options. + +
+ +Each section in this tutorial covers a single configuration step. You can find the complete source code in the following GitHub repository: + +#include btn-open-github with { + href: "https://github.com/DevExpress-Examples/devextreme-getting-started-with-draggable" +} \ No newline at end of file diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md new file mode 100644 index 0000000000..fd137913cb --- /dev/null +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md @@ -0,0 +1,96 @@ +--- + +##### jQuery + +[Add DevExtreme to your jQuery application](/concepts/58%20jQuery%20Components/05%20Add%20DevExtreme%20to%20a%20jQuery%20Application/00%20Add%20DevExtreme%20to%20a%20jQuery%20Application.md '/Documentation/Guide/jQuery_Components/Add_DevExtreme_to_a_jQuery_Application/') and use the following code to create a Draggable: + + + $(function() { + $("#draggable").dxDraggable({}); + }); + + + + + + + + + + + +
+ + + +##### Angular + +[Add DevExtreme to your Angular application](/concepts/40%20Angular%20Components/10%20Getting%20Started/03%20Add%20DevExtreme%20to%20an%20Angular%20CLI%20Application '/Documentation/Guide/Angular_Components/Getting_Started/Add_DevExtreme_to_an_Angular_CLI_Application/') and use the following code to create a Draggable: + + + + + + import { Component } from '@angular/core'; + import { type DxDraggableTypes } from 'devextreme-angular/ui/draggable'; + + + import { NgModule } from '@angular/core'; + import { BrowserModule } from '@angular/platform-browser'; + import { DxDraggableModule } from 'devextreme-angular'; + import { AppRoutingModule } from './app-routing.module'; + import { AppComponent } from './app.component'; + + @NgModule({ + declarations: [ + AppComponent + ], + imports: [ + BrowserModule, + AppRoutingModule, + DxDraggableModule + ], + providers: [], + bootstrap: [AppComponent] + }) + export class AppModule { } + + + { + // ... + "styles": [ + "node_modules/devextreme/dist/css/dx.fluent.blue.light.css", + ], + } + +##### Vue + +[Add DevExtreme to your Vue application](/concepts/55%20Vue%20Components/05%20Add%20DevExtreme%20to%20a%20Vue%20Application/00%20Add%20DevExtreme%20to%20a%20Vue%20Application.md '/Documentation/Guide/Vue_Components/Add_DevExtreme_to_a_Vue_Application/') and use the following code to create a Draggable: + + + + + + +##### React + +[Add DevExtreme to your React application](/concepts/50%20React%20Components/05%20Add%20DevExtreme%20to%20a%20React%20Application/00%20Add%20DevExtreme%20to%20a%20React%20Application.md '/Documentation/Guide/React_Components/Add_DevExtreme_to_a_React_Application/') and use the following code to create a Draggable: + + + import React, { JSX, useState } from 'react'; + import { Draggable, type DraggableTypes } from 'devextreme-react/draggable'; + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + + export default function App(): JSX.Element { + return ( + + ); + } + +--- \ No newline at end of file diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Handle Events.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Handle Events.md new file mode 100644 index 0000000000..805d02f14e --- /dev/null +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Handle Events.md @@ -0,0 +1 @@ +This \ No newline at end of file diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Configure Draggable Options.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Configure Draggable Options.md new file mode 100644 index 0000000000..0e8521fad4 --- /dev/null +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Configure Draggable Options.md @@ -0,0 +1 @@ +TBA \ No newline at end of file From efa9727f4f01d3cc0e069a308676d15a741e4b35 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 26 Dec 2025 10:05:50 +0400 Subject: [PATCH 02/13] Add Simulator Container --- .../GettingStartedWith/Draggable/index.css | 81 +++++++++++++++++++ .../GettingStartedWith/Draggable/index.html | 37 +++++++++ .../GettingStartedWith/Draggable/index.js | 38 +++++++++ .../00 Getting Started with Draggable.md | 2 +- 4 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 applications/GettingStartedWith/Draggable/index.css create mode 100644 applications/GettingStartedWith/Draggable/index.html create mode 100644 applications/GettingStartedWith/Draggable/index.js diff --git a/applications/GettingStartedWith/Draggable/index.css b/applications/GettingStartedWith/Draggable/index.css new file mode 100644 index 0000000000..256003c482 --- /dev/null +++ b/applications/GettingStartedWith/Draggable/index.css @@ -0,0 +1,81 @@ +.demo-container { + display: flex; + justify-content: center; + padding: 40px; + height: 500px; +} + +.board { + background-color: light-dark(#F5F5F5, #141414); + outline: 4px solid light-dark(#F5F5F5, #141414); + max-width: 1000px; + min-width: 350px; + width: 100%; + height: 500px; + display: flex; + justify-content: start; + gap: 8px; + border-radius: 8px; +} + +@media (width <= 830px) { + .board { + flex-direction: column; + } +} + +.card { + width: 230px; + min-height: 84px; + max-height: 84px; + border-radius: 8px; + background-color: light-dark(#FFFFFF, #292929); + display: flex; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.24); + transition: box-shadow 0.1s ease-in-out; +} + +.color-indicator { + margin: 8px; + height: 68px; + width: 4px; + border-radius: 4px; +} + +.color-indicator.blue { + background-color: #62ABF5; +} + +.color-indicator.green { + background-color: #107C10; +} + +.color-indicator.red { + background-color: #D13438; +} + +.color-indicator.yellow { + background-color: #EFB839; +} + +.text-container { + margin-top: 8px; + margin-bottom: 8px; + margin-right: 8px; + height: 68px; + display: flex; + flex-direction: column; +} + +.body-text-box { + height: 40px; +} + +.detail-text-box { + margin-top: auto; + color: light-dark(#707070, #999999); +} + +.card.dx-draggable-dragging { + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28); +} \ No newline at end of file diff --git a/applications/GettingStartedWith/Draggable/index.html b/applications/GettingStartedWith/Draggable/index.html new file mode 100644 index 0000000000..23329cdc94 --- /dev/null +++ b/applications/GettingStartedWith/Draggable/index.html @@ -0,0 +1,37 @@ +
+
+ +
+
+
+
Install New Router in Dev Room
+
Amelia Harper
+
+
+ +
+
+
+
Launch New Website
+
Brett Wade
+
+
+ +
+
+
+
Prepare 2026 Marketing Plan
+
Robert Reagan
+
+
+ +
+
+
+
Approve Personal Computer Upgrade Plan
+
Bart Arnaz
+
+
+ +
+
\ No newline at end of file diff --git a/applications/GettingStartedWith/Draggable/index.js b/applications/GettingStartedWith/Draggable/index.js new file mode 100644 index 0000000000..ebd8e6f0b2 --- /dev/null +++ b/applications/GettingStartedWith/Draggable/index.js @@ -0,0 +1,38 @@ +$(() => { + + let z = 0; + + $('#note-1').dxDraggable({ + onDragStart: handleDragStart, + boundary: '.board', + }).on('click', handleClick); + + $('#note-2').dxDraggable({ + onDragStart: handleDragStart, + boundary: '.board', + }).on('click', handleClick); + + $('#note-3').dxDraggable({ + onDragStart: handleDragStart, + boundary: '.board', + }).on('click', handleClick); + + $('#note-4').dxDraggable({ + onDragStart: handleDragStart, + boundary: '.board', + }).on('click', handleClick); + + function changeZIndex(el) { + z++ + el.css('z-index', z); + } + + function handleClick(e) { + changeZIndex($(e.currentTarget)); + } + + function handleDragStart(e) { + changeZIndex($(e.element[0])); + } + +}); diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md index 30ecb78cfc..e5c3b7e773 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md @@ -6,7 +6,7 @@ This tutorial guides you through the following steps: - Handle events (common events and events specific to Draggable). - Configure Draggable options. -
+
Each section in this tutorial covers a single configuration step. You can find the complete source code in the following GitHub repository: From 32d69c2f7b9f85c9a7ad1d6f173dd5fa5dd4b7d4 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 26 Dec 2025 11:28:36 +0400 Subject: [PATCH 03/13] Update Adaptivity Following Feedback --- .../GettingStartedWith/Draggable/index.css | 99 +++++++++++-------- 1 file changed, 57 insertions(+), 42 deletions(-) diff --git a/applications/GettingStartedWith/Draggable/index.css b/applications/GettingStartedWith/Draggable/index.css index 256003c482..25b0e74e33 100644 --- a/applications/GettingStartedWith/Draggable/index.css +++ b/applications/GettingStartedWith/Draggable/index.css @@ -1,81 +1,96 @@ .demo-container { - display: flex; - justify-content: center; - padding: 40px; - height: 500px; + display: flex; + justify-content: center; + padding: 40px; + height: 500px; } .board { - background-color: light-dark(#F5F5F5, #141414); - outline: 4px solid light-dark(#F5F5F5, #141414); - max-width: 1000px; - min-width: 350px; - width: 100%; - height: 500px; - display: flex; - justify-content: start; - gap: 8px; - border-radius: 8px; + background-color: light-dark(#F5F5F5, #141414); + outline: 4px solid light-dark(#F5F5F5, #141414); + max-width: 1000px; + min-width: 320px; + width: 100%; + height: 500px; + display: grid; + grid-template-columns: repeat(4, 1fr); + align-content: start; + gap: 8px; + border-radius: 8px; } -@media (width <= 830px) { +@media (width < 850px) { .board { - flex-direction: column; + grid-template-columns: repeat(3, 1fr); + } +} + +@media (width < 650px) { + .board { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (width < 475px) { + .board { + grid-template-columns: 1fr; } } .card { - width: 230px; - min-height: 84px; - max-height: 84px; - border-radius: 8px; - background-color: light-dark(#FFFFFF, #292929); - display: flex; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.24); - transition: box-shadow 0.1s ease-in-out; + max-width: 320px; + min-width: 180px; + width: 100%; + min-height: 84px; + max-height: 84px; + border-radius: 8px; + background-color: light-dark(#FFFFFF, #292929); + display: flex; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.24); + transition: box-shadow 0.1s ease-in-out; } .color-indicator { - margin: 8px; - height: 68px; - width: 4px; - border-radius: 4px; + margin: 8px; + height: 68px; + width: 4px; + border-radius: 4px; } .color-indicator.blue { - background-color: #62ABF5; + background-color: #62ABF5; } .color-indicator.green { - background-color: #107C10; + background-color: #107C10; } .color-indicator.red { - background-color: #D13438; + background-color: #D13438; } .color-indicator.yellow { - background-color: #EFB839; + background-color: #EFB839; } .text-container { - margin-top: 8px; - margin-bottom: 8px; - margin-right: 8px; - height: 68px; - display: flex; - flex-direction: column; + margin-top: 8px; + margin-bottom: 8px; + margin-right: 8px; + height: 68px; + display: flex; + flex-direction: column; } .body-text-box { - height: 40px; + height: 40px; } .detail-text-box { - margin-top: auto; - color: light-dark(#707070, #999999); + margin-top: auto; + color: light-dark(#707070, #999999); } .card.dx-draggable-dragging { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28); + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28); } \ No newline at end of file From e4263d6309da201d62ae7b79344ed3508f54b19d Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 26 Dec 2025 14:17:33 +0400 Subject: [PATCH 04/13] Add DragMove and DragEnd Handlers --- .../GettingStartedWith/Draggable/index.html | 40 ++++----- .../GettingStartedWith/Draggable/index.js | 83 +++++++++++++------ 2 files changed, 78 insertions(+), 45 deletions(-) diff --git a/applications/GettingStartedWith/Draggable/index.html b/applications/GettingStartedWith/Draggable/index.html index 23329cdc94..19e3b156a8 100644 --- a/applications/GettingStartedWith/Draggable/index.html +++ b/applications/GettingStartedWith/Draggable/index.html @@ -2,35 +2,35 @@
-
-
-
Install New Router in Dev Room
-
Amelia Harper
-
+
+
+
Install New Router in Dev Room
+
Amelia Harper
+
-
-
-
Launch New Website
-
Brett Wade
-
+
+
+
Launch New Website
+
Brett Wade
+
-
-
-
Prepare 2026 Marketing Plan
-
Robert Reagan
-
+
+
+
Prepare 2026 Marketing Plan
+
Robert Reagan
+
-
-
-
Approve Personal Computer Upgrade Plan
-
Bart Arnaz
-
+
+
+
Approve Personal Computer Upgrade Plan
+
Bart Arnaz
+
diff --git a/applications/GettingStartedWith/Draggable/index.js b/applications/GettingStartedWith/Draggable/index.js index ebd8e6f0b2..9cb6a10b68 100644 --- a/applications/GettingStartedWith/Draggable/index.js +++ b/applications/GettingStartedWith/Draggable/index.js @@ -1,38 +1,71 @@ $(() => { - + const notes = ["#note-1", "#note-2", "#note-3", "#note-4"]; let z = 0; - $('#note-1').dxDraggable({ - onDragStart: handleDragStart, - boundary: '.board', - }).on('click', handleClick); - - $('#note-2').dxDraggable({ - onDragStart: handleDragStart, - boundary: '.board', - }).on('click', handleClick); - - $('#note-3').dxDraggable({ - onDragStart: handleDragStart, - boundary: '.board', - }).on('click', handleClick); - - $('#note-4').dxDraggable({ - onDragStart: handleDragStart, - boundary: '.board', - }).on('click', handleClick); + let handleComponent; + $("#note-1") + .dxDraggable({ + onDragStart: handleDragStart, + onDragMove: handleDragMove, + onDragEnd: handleDragEnd, + boundary: ".board", + group: "1", + }) + .on("click", handleClick); + + $("#note-2") + .dxDraggable({ + onDragStart: handleDragStart, + onDragMove: handleDragMove, + onDragEnd: handleDragEnd, + group: "1", + boundary: ".board", + }) + .on("click", handleClick); + + $("#note-3") + .dxDraggable({ + onDragStart: handleDragStart, + onDragMove: handleDragMove, + onDragEnd: handleDragEnd, + group: "1", + boundary: ".board", + }) + .on("click", handleClick); + + $("#note-4") + .dxDraggable({ + onDragStart: handleDragStart, + onDragMove: handleDragMove, + onDragEnd: handleDragEnd, + boundary: ".board", + group: "1", + + }) + .on("click", handleClick); function changeZIndex(el) { - z++ - el.css('z-index', z); + z++; + el.css("z-index", z); } - + function handleClick(e) { changeZIndex($(e.currentTarget)); } - + function handleDragStart(e) { changeZIndex($(e.element[0])); } - + + function handleDragMove(e) { + if (e.toComponent !== e.component) { + e.toComponent.element().css("opacity", "50%"); + } else { + notes.forEach((el) => $(el).css('opacity', '')); + } + } + + function handleDragEnd(e) { + e.toComponent.element().css("opacity", ""); + } }); From e2d89e356728a9cc15a79484455ea02f2784dfb4 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 29 Dec 2025 09:12:14 +0400 Subject: [PATCH 05/13] Add Updates --- .../GettingStartedWith/Draggable/index.css | 1 + .../GettingStartedWith/Draggable/index.js | 22 ++--- .../00 Getting Started with Draggable.md | 2 +- .../05 Create Draggable.md | 83 ++++++++++++++++++- .../10 Configure Draggable Options.md | 1 + .../10 Handle Events.md | 1 - .../15 Configure Draggable Options.md | 1 - .../15 Handle Events.md | 7 ++ 8 files changed, 99 insertions(+), 19 deletions(-) create mode 100644 concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md delete mode 100644 concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Handle Events.md delete mode 100644 concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Configure Draggable Options.md create mode 100644 concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md diff --git a/applications/GettingStartedWith/Draggable/index.css b/applications/GettingStartedWith/Draggable/index.css index 25b0e74e33..ac659ded82 100644 --- a/applications/GettingStartedWith/Draggable/index.css +++ b/applications/GettingStartedWith/Draggable/index.css @@ -38,6 +38,7 @@ } .card { + z-index: 1; max-width: 320px; min-width: 180px; width: 100%; diff --git a/applications/GettingStartedWith/Draggable/index.js b/applications/GettingStartedWith/Draggable/index.js index 9cb6a10b68..65e5ab5451 100644 --- a/applications/GettingStartedWith/Draggable/index.js +++ b/applications/GettingStartedWith/Draggable/index.js @@ -1,10 +1,8 @@ $(() => { const notes = ["#note-1", "#note-2", "#note-3", "#note-4"]; - let z = 0; + let z = 1; - let handleComponent; - $("#note-1") - .dxDraggable({ + $("#note-1").dxDraggable({ onDragStart: handleDragStart, onDragMove: handleDragMove, onDragEnd: handleDragEnd, @@ -13,8 +11,7 @@ $(() => { }) .on("click", handleClick); - $("#note-2") - .dxDraggable({ + $("#note-2").dxDraggable({ onDragStart: handleDragStart, onDragMove: handleDragMove, onDragEnd: handleDragEnd, @@ -23,8 +20,7 @@ $(() => { }) .on("click", handleClick); - $("#note-3") - .dxDraggable({ + $("#note-3").dxDraggable({ onDragStart: handleDragStart, onDragMove: handleDragMove, onDragEnd: handleDragEnd, @@ -33,14 +29,12 @@ $(() => { }) .on("click", handleClick); - $("#note-4") - .dxDraggable({ + $("#note-4").dxDraggable({ onDragStart: handleDragStart, onDragMove: handleDragMove, onDragEnd: handleDragEnd, boundary: ".board", group: "1", - }) .on("click", handleClick); @@ -59,13 +53,13 @@ $(() => { function handleDragMove(e) { if (e.toComponent !== e.component) { - e.toComponent.element().css("opacity", "50%"); + e.toComponent.element().css("outline", "1px dashed red"); } else { - notes.forEach((el) => $(el).css('opacity', '')); + notes.forEach((el) => $(el).css('outline', '')); } } function handleDragEnd(e) { - e.toComponent.element().css("opacity", ""); + notes.forEach((el) => $(el).css('outline', '')); } }); diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md index e5c3b7e773..1927221df4 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md @@ -3,7 +3,7 @@ This tutorial guides you through the following steps: - Add a Draggable to a page. -- Handle events (common events and events specific to Draggable). +- Handle events (specific to Draggable, as well as common events). - Configure Draggable options.
diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md index fd137913cb..7dba290e27 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md @@ -18,7 +18,7 @@ - +
@@ -93,4 +93,83 @@ ); } ---- \ No newline at end of file +--- + +Draggable does not include default visual elements. Specify custom Draggable markup as follows: + +--- + +##### jQuery + + + $(function() { + $("#note-1").dxDraggable({}); + }); + + + + + + + + + + + +
+
+
+
Install New Router in Dev Room
+
Amelia Harper
+
+
+ + + +##### Angular + + + +
+
+
Install New Router in Dev Room
+
Amelia Harper
+
+ + +##### Vue + + + + +##### React + + + import React, { JSX, useState } from 'react'; + import { Draggable, type DraggableTypes } from 'devextreme-react/draggable'; + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + + export default function App(): JSX.Element { + return ( + +
+
+
Install New Router in Dev Room
+
Amelia Harper
+
+ + ); + } + +--- + +This example creates four Draggable components inside a common `.board` container: + diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md new file mode 100644 index 0000000000..b1154c22b4 --- /dev/null +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md @@ -0,0 +1 @@ +This example specifies the [boundary](/Documentation/ApiReference/UI_Components/dxDraggable/Configuration/#boundary/) property to constrain Draggable movement inside the `.board` container: \ No newline at end of file diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Handle Events.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Handle Events.md deleted file mode 100644 index 805d02f14e..0000000000 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Handle Events.md +++ /dev/null @@ -1 +0,0 @@ -This \ No newline at end of file diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Configure Draggable Options.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Configure Draggable Options.md deleted file mode 100644 index 0e8521fad4..0000000000 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Configure Draggable Options.md +++ /dev/null @@ -1 +0,0 @@ -TBA \ No newline at end of file diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md new file mode 100644 index 0000000000..6b5cf204bb --- /dev/null +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md @@ -0,0 +1,7 @@ +This example configures the Draggable event handlers as follows: + +- onDragStart: Card overlapping order is updated (z-index styles). +- onDragMove: Card styles are updated to indicate overlapping. +- onDragEnd: Card overlap indicators are reset. + +To update overlapping order on card click, call the on() \ No newline at end of file From 647dadb11f5c61d407e6d6a2e0c049f1e36f4f84 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 29 Dec 2025 18:44:55 +0400 Subject: [PATCH 06/13] Update Demo Container Code Following Example Improvements --- .../GettingStartedWith/Draggable/index.css | 8 +- .../GettingStartedWith/Draggable/index.js | 109 +++++++++--------- 2 files changed, 60 insertions(+), 57 deletions(-) diff --git a/applications/GettingStartedWith/Draggable/index.css b/applications/GettingStartedWith/Draggable/index.css index ac659ded82..45ceda2a93 100644 --- a/applications/GettingStartedWith/Draggable/index.css +++ b/applications/GettingStartedWith/Draggable/index.css @@ -45,9 +45,9 @@ min-height: 84px; max-height: 84px; border-radius: 8px; - background-color: light-dark(#FFFFFF, #292929); + background-color: light-dark(#FFF, #292929); display: flex; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.24); + box-shadow: 0 0 2px rgba(0 0 0 / 24%); transition: box-shadow 0.1s ease-in-out; } @@ -89,9 +89,9 @@ .detail-text-box { margin-top: auto; - color: light-dark(#707070, #999999); + color: light-dark(#707070, #999); } .card.dx-draggable-dragging { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28); + box-shadow: 0 4px 8px rgba(0 0 0 / 28%); } \ No newline at end of file diff --git a/applications/GettingStartedWith/Draggable/index.js b/applications/GettingStartedWith/Draggable/index.js index 65e5ab5451..505beacdba 100644 --- a/applications/GettingStartedWith/Draggable/index.js +++ b/applications/GettingStartedWith/Draggable/index.js @@ -1,65 +1,68 @@ $(() => { - const notes = ["#note-1", "#note-2", "#note-3", "#note-4"]; let z = 1; - $("#note-1").dxDraggable({ - onDragStart: handleDragStart, - onDragMove: handleDragMove, - onDragEnd: handleDragEnd, - boundary: ".board", - group: "1", - }) - .on("click", handleClick); + $("#note-1").dxDraggable({ + onDragStart: handleDragStart, + boundary: ".board", + group: "cards", + }).on({ + "click": handleClick, + "dxdragenter": handleDragEnter, + "dxdragleave": handleDragStop, + "dxdrop": handleDragStop, + }); - $("#note-2").dxDraggable({ - onDragStart: handleDragStart, - onDragMove: handleDragMove, - onDragEnd: handleDragEnd, - group: "1", - boundary: ".board", - }) - .on("click", handleClick); + $("#note-2").dxDraggable({ + onDragStart: handleDragStart, + group: "cards", + boundary: ".board", + }).on({ + "click": handleClick, + "dxdragenter": handleDragEnter, + "dxdragleave": handleDragStop, + "dxdrop": handleDragStop, + }); - $("#note-3").dxDraggable({ - onDragStart: handleDragStart, - onDragMove: handleDragMove, - onDragEnd: handleDragEnd, - group: "1", - boundary: ".board", - }) - .on("click", handleClick); + $("#note-3").dxDraggable({ + onDragStart: handleDragStart, + group: "cards", + boundary: ".board", + }).on({ + "click": handleClick, + "dxdragenter": handleDragEnter, + "dxdragleave": handleDragStop, + "dxdrop": handleDragStop, + }); - $("#note-4").dxDraggable({ - onDragStart: handleDragStart, - onDragMove: handleDragMove, - onDragEnd: handleDragEnd, - boundary: ".board", - group: "1", - }) - .on("click", handleClick); + $("#note-4").dxDraggable({ + onDragStart: handleDragStart, + boundary: ".board", + group: "cards", + }).on({ + "click": handleClick, + "dxdragenter": handleDragEnter, + "dxdragleave": handleDragStop, + "dxdrop": handleDragStop, + }); - function changeZIndex(el) { - z++; - el.css("z-index", z); - } + function changeZIndex(el) { + z++; + el.css("z-index", z); + } - function handleClick(e) { - changeZIndex($(e.currentTarget)); - } + function handleClick(e) { + changeZIndex($(e.currentTarget)); + } - function handleDragStart(e) { - changeZIndex($(e.element[0])); - } + function handleDragStart(e) { + changeZIndex($(e.element[0])); + } - function handleDragMove(e) { - if (e.toComponent !== e.component) { - e.toComponent.element().css("outline", "1px dashed red"); - } else { - notes.forEach((el) => $(el).css('outline', '')); - } - } + function handleDragEnter(e) { + $(e.target).css("outline", "1px dashed red"); + } - function handleDragEnd(e) { - notes.forEach((el) => $(el).css('outline', '')); - } + function handleDragStop(e) { + $(e.target).css("outline", ""); + } }); From 092755359919e9fb0b76721345ff94830979dce9 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 13 Jan 2026 11:59:51 +0400 Subject: [PATCH 07/13] Add Padding --- applications/GettingStartedWith/Draggable/index.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/applications/GettingStartedWith/Draggable/index.css b/applications/GettingStartedWith/Draggable/index.css index 45ceda2a93..7bd0d59459 100644 --- a/applications/GettingStartedWith/Draggable/index.css +++ b/applications/GettingStartedWith/Draggable/index.css @@ -2,7 +2,7 @@ display: flex; justify-content: center; padding: 40px; - height: 500px; + height: 524px; } .board { @@ -17,6 +17,7 @@ align-content: start; gap: 8px; border-radius: 8px; + padding: 12px; } @media (width < 850px) { From e5a3d2f30ad2a92c5b181e3912c9124dc1d97ece Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 13 Jan 2026 12:51:50 +0400 Subject: [PATCH 08/13] Update Following Feedback --- .../GettingStartedWith/Draggable/index.css | 19 +++++++++++++++++-- .../GettingStartedWith/Draggable/index.html | 2 ++ .../00 Getting Started with Draggable.md | 2 +- 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/applications/GettingStartedWith/Draggable/index.css b/applications/GettingStartedWith/Draggable/index.css index 7bd0d59459..7ec5bca708 100644 --- a/applications/GettingStartedWith/Draggable/index.css +++ b/applications/GettingStartedWith/Draggable/index.css @@ -1,13 +1,28 @@ +body { + padding: 0; +} + .demo-container { display: flex; + flex-direction: column; justify-content: center; - padding: 40px; + align-items: center; + padding: 0 40px; height: 524px; } +.boundary-text { + height: 16px; + line-height: 16px; + text-align: center; + vertical-align: middle; + padding-top: 17px; + padding-bottom: 17px; +} + .board { background-color: light-dark(#F5F5F5, #141414); - outline: 4px solid light-dark(#F5F5F5, #141414); + outline: 1px dashed light-dark(#E0E0E0, #525252); max-width: 1000px; min-width: 320px; width: 100%; diff --git a/applications/GettingStartedWith/Draggable/index.html b/applications/GettingStartedWith/Draggable/index.html index 19e3b156a8..e3ca20ccd4 100644 --- a/applications/GettingStartedWith/Draggable/index.html +++ b/applications/GettingStartedWith/Draggable/index.html @@ -1,4 +1,5 @@
+
Dragging Boundary
@@ -34,4 +35,5 @@
+
Dragging Boundary
\ No newline at end of file diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md index 1927221df4..f9758c8b15 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/00 Getting Started with Draggable.md @@ -6,7 +6,7 @@ This tutorial guides you through the following steps: - Handle events (specific to Draggable, as well as common events). - Configure Draggable options. -
+
Each section in this tutorial covers a single configuration step. You can find the complete source code in the following GitHub repository: From 3a3e3f520e432f1bf5d2bcee7700813b8fa286fc Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 16 Jan 2026 11:01:50 +0400 Subject: [PATCH 09/13] Add Style & Text Updates --- .../GettingStartedWith/Draggable/index.css | 13 +- .../GettingStartedWith/Draggable/index.html | 4 +- .../GettingStartedWith/Draggable/index.js | 4 +- .../05 Create Draggable.md | 179 +++++++++++++++++- .../10 Configure Draggable Options.md | 66 ++++++- .../15 Handle Events.md | 6 +- 6 files changed, 254 insertions(+), 18 deletions(-) diff --git a/applications/GettingStartedWith/Draggable/index.css b/applications/GettingStartedWith/Draggable/index.css index 7ec5bca708..f8d40c2c43 100644 --- a/applications/GettingStartedWith/Draggable/index.css +++ b/applications/GettingStartedWith/Draggable/index.css @@ -18,6 +18,7 @@ body { vertical-align: middle; padding-top: 17px; padding-bottom: 17px; + color: var(--dx-color-icon) } .board { @@ -75,19 +76,19 @@ body { } .color-indicator.blue { - background-color: #62ABF5; + background-color: var(--dx-color-primary); } .color-indicator.green { - background-color: #107C10; + background-color: var(--dx-color-success); } .color-indicator.red { - background-color: #D13438; + background-color: var(--dx-color-danger); } .color-indicator.yellow { - background-color: #EFB839; + background-color: var(--dx-color-warning); } .text-container { @@ -110,4 +111,8 @@ body { .card.dx-draggable-dragging { box-shadow: 0 4px 8px rgba(0 0 0 / 28%); +} + +.card.overlapped { + outline: 1px dashed var(--dx-color-primary); } \ No newline at end of file diff --git a/applications/GettingStartedWith/Draggable/index.html b/applications/GettingStartedWith/Draggable/index.html index e3ca20ccd4..22576b71d9 100644 --- a/applications/GettingStartedWith/Draggable/index.html +++ b/applications/GettingStartedWith/Draggable/index.html @@ -13,7 +13,7 @@
-
Launch New Website
+
👨‍💻 Launch New Website
Brett Wade
@@ -29,7 +29,7 @@
-
Approve Personal Computer Upgrade Plan
+
🖥️ Approve Personal Computer Upgrade Plan
Bart Arnaz
diff --git a/applications/GettingStartedWith/Draggable/index.js b/applications/GettingStartedWith/Draggable/index.js index 505beacdba..183083cb65 100644 --- a/applications/GettingStartedWith/Draggable/index.js +++ b/applications/GettingStartedWith/Draggable/index.js @@ -59,10 +59,10 @@ $(() => { } function handleDragEnter(e) { - $(e.target).css("outline", "1px dashed red"); + e.target.classList.add('overlapped'); } function handleDragStop(e) { - $(e.target).css("outline", ""); + e.target.classList.remove('overlapped'); } }); diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md index 7dba290e27..1eb5c7f22e 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md @@ -95,7 +95,7 @@ --- -Draggable does not include default visual elements. Specify custom Draggable markup as follows: +Draggable does not include default visual elements. Specify custom markup as follows: --- @@ -160,10 +160,10 @@ Draggable does not include default visual elements. Specify custom Draggable mar export default function App(): JSX.Element { return ( -
-
-
Install New Router in Dev Room
-
Amelia Harper
+
+
+
Install New Router in Dev Room
+
Amelia Harper
); @@ -173,3 +173,172 @@ Draggable does not include default visual elements. Specify custom Draggable mar This example creates four Draggable components inside a common `.board` container: +--- + +##### jQuery + + + $(function() { + $("#note-1").dxDraggable({}); + $("#note-2").dxDraggable({}); + $("#note-3").dxDraggable({}); + $("#note-4").dxDraggable({}); + }); + + +
+
+
+
+
Install New Router in Dev Room
+
Amelia Harper
+
+
+ +
+
+
+
Launch New Website
+
Brett Wade
+
+
+ +
+
+
+
Prepare 2026 Marketing Plan
+
Robert Reagan
+
+
+ +
+
+
+
Approve Personal Computer Upgrade Plan
+
Bart Arnaz
+
+
+
+ +##### Angular + + +
+ +
+
+
Install New Router in Dev Room
+
Amelia Harper
+
+ + + +
+
+
Launch New Website
+
Brett Wade
+
+ + + +
+
+
Prepare 2026 Marketing Plan
+
Robert Reagan
+
+ + + +
+
+
Approve Personal Computer Upgrade Plan
+
Bart Arnaz
+
+ +
+ +##### Vue + + + + +##### React + + + import React, { JSX, useState } from 'react'; + import { Draggable, type DraggableTypes } from 'devextreme-react/draggable'; + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + + export default function App(): JSX.Element { + return ( +
+ +
+
+
Install New Router in Dev Room
+
Amelia Harper
+
+ + + +
+
+
Launch New Website
+
Brett Wade
+
+ + + +
+
+
Prepare 2026 Marketing Plan
+
Robert Reagan
+
+ + + +
+
+
Approve Personal Computer Upgrade Plan
+
Bart Arnaz
+
+ +
+ ); + } + +--- diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md index b1154c22b4..33726b1166 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md @@ -1 +1,65 @@ -This example specifies the [boundary](/Documentation/ApiReference/UI_Components/dxDraggable/Configuration/#boundary/) property to constrain Draggable movement inside the `.board` container: \ No newline at end of file +This example specifies the [boundary](/Documentation/ApiReference/UI_Components/dxDraggable/Configuration/#boundary/) property to constrain Draggable movement inside the `.board` container: + +--- + +##### jQuery + + + $(function() { + $("#note-1").dxDraggable({ + boundary: '.board' + }); + + // ... + }); + +##### Angular + + +
+ + + +
+ +##### Vue + + + + +##### React + + + import React, { JSX, useState } from 'react'; + import { Draggable, type DraggableTypes } from 'devextreme-react/draggable'; + import 'devextreme/dist/css/dx.fluent.blue.light.css'; + + export default function App(): JSX.Element { + return ( +
+ + + {/* ... */} +
+ ); + } + +--- diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md index 6b5cf204bb..ea927dcaed 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md @@ -1,7 +1,5 @@ -This example configures the Draggable event handlers as follows: +This example configures the onDragStart event handler to update card overlapping order. + -- onDragStart: Card overlapping order is updated (z-index styles). -- onDragMove: Card styles are updated to indicate overlapping. -- onDragEnd: Card overlap indicators are reset. To update overlapping order on card click, call the on() \ No newline at end of file From e2b96ab2b4e0ae5174584e7bb96d0cc347066f0a Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 16 Jan 2026 14:59:24 +0400 Subject: [PATCH 10/13] Finalize Topic --- .../GettingStartedWith/Draggable/index.css | 2 +- .../GettingStartedWith/Draggable/index.js | 2 +- .../05 Create Draggable.md | 32 +- .../10 Configure Draggable Options.md | 18 +- .../15 Handle Events.md | 290 +++++++++++++++++- 5 files changed, 316 insertions(+), 28 deletions(-) diff --git a/applications/GettingStartedWith/Draggable/index.css b/applications/GettingStartedWith/Draggable/index.css index f8d40c2c43..ab55db37be 100644 --- a/applications/GettingStartedWith/Draggable/index.css +++ b/applications/GettingStartedWith/Draggable/index.css @@ -55,7 +55,7 @@ body { } .card { - z-index: 1; + z-index: 0; max-width: 320px; min-width: 180px; width: 100%; diff --git a/applications/GettingStartedWith/Draggable/index.js b/applications/GettingStartedWith/Draggable/index.js index 183083cb65..463ae549b8 100644 --- a/applications/GettingStartedWith/Draggable/index.js +++ b/applications/GettingStartedWith/Draggable/index.js @@ -46,8 +46,8 @@ $(() => { }); function changeZIndex(el) { - z++; el.css("z-index", z); + z++; } function handleClick(e) { diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md index 1eb5c7f22e..1a79f86f69 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md @@ -87,12 +87,14 @@ import { Draggable, type DraggableTypes } from 'devextreme-react/draggable'; import 'devextreme/dist/css/dx.fluent.blue.light.css'; - export default function App(): JSX.Element { + function App(): JSX.Element { return ( ); } + export default App; + --- Draggable does not include default visual elements. Specify custom markup as follows: @@ -153,11 +155,9 @@ Draggable does not include default visual elements. Specify custom markup as fol ##### React - import React, { JSX, useState } from 'react'; - import { Draggable, type DraggableTypes } from 'devextreme-react/draggable'; - import 'devextreme/dist/css/dx.fluent.blue.light.css'; + import { Draggable } from 'devextreme-react/draggable'; - export default function App(): JSX.Element { + function App(): JSX.Element { return (
@@ -198,7 +198,7 @@ This example creates four Draggable components inside a common `.board` containe
-
Launch New Website
+
👨‍💻 Launch New Website
Brett Wade
@@ -214,7 +214,7 @@ This example creates four Draggable components inside a common `.board` containe
-
Approve Personal Computer Upgrade Plan
+
🖥️ Approve Personal Computer Upgrade Plan
Bart Arnaz
@@ -235,7 +235,7 @@ This example creates four Draggable components inside a common `.board` containe
-
Launch New Website
+
👨‍💻 Launch New Website
Brett Wade
 @@ -251,7 +251,7 @@ This example creates four Draggable components inside a common `.board` containe
-
Approve Personal Computer Upgrade Plan
+
🖥️ Approve Personal Computer Upgrade Plan
Bart Arnaz
 @@ -273,7 +273,7 @@ This example creates four Draggable components inside a common `.board` containe
-
Launch New Website
+
👨‍💻 Launch New Website
Brett Wade
 @@ -289,7 +289,7 @@ This example creates four Draggable components inside a common `.board` containe
-
Approve Personal Computer Upgrade Plan
+
🖥️ Approve Personal Computer Upgrade Plan
Bart Arnaz
 @@ -299,11 +299,9 @@ This example creates four Draggable components inside a common `.board` containe ##### React - import React, { JSX, useState } from 'react'; - import { Draggable, type DraggableTypes } from 'devextreme-react/draggable'; - import 'devextreme/dist/css/dx.fluent.blue.light.css'; + import { Draggable } from 'devextreme-react/draggable'; - export default function App(): JSX.Element { + function App(): JSX.Element { return (
@@ -317,7 +315,7 @@ This example creates four Draggable components inside a common `.board` containe
-
Launch New Website
+
👨‍💻 Launch New Website
Brett Wade
 @@ -333,7 +331,7 @@ This example creates four Draggable components inside a common `.board` containe
-
Approve Personal Computer Upgrade Plan
+
🖥️ Approve Personal Computer Upgrade Plan
Bart Arnaz
 diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md index 33726b1166..57c78fecc2 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/10 Configure Draggable Options.md @@ -21,7 +21,9 @@ This example specifies the [boundary](/Documentation/ApiReference/UI_Components/ id="note-1" class="card" boundary=".board" - > + > + +
@@ -35,7 +37,9 @@ This example specifies the [boundary](/Documentation/ApiReference/UI_Components/ id="note-1" class="card" boundary=".board" - > + > + +
@@ -44,18 +48,18 @@ This example specifies the [boundary](/Documentation/ApiReference/UI_Components/ ##### React - import React, { JSX, useState } from 'react'; - import { Draggable, type DraggableTypes } from 'devextreme-react/draggable'; - import 'devextreme/dist/css/dx.fluent.blue.light.css'; + import { Draggable } from 'devextreme-react/draggable'; - export default function App(): JSX.Element { + function App(): JSX.Element { return (
+ > + {/* ... */} + {/* ... */}
diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md index ea927dcaed..81f1cf1834 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md @@ -1,5 +1,291 @@ -This example configures the onDragStart event handler to update card overlapping order. +This example specifies an [onDragStart](/Documentation/ApiReference/UI_Components/dxDraggable/Configuration/#onDragStart) handler to update card overlapping as follows: +--- +##### jQuery -To update overlapping order on card click, call the on() \ No newline at end of file + + $(function() { + let z = 1; + + $("#note-1").dxDraggable({ + onDragStart(e) { + changeZIndex($(e.element[0])); + } + // ... + }); + + function changeZIndex(el) { + el.css("z-index", z); + z++; + } + }); + +##### Angular + + +
+ + + +
+ + + import { type DxDraggableTypes } from 'devextreme-angular/ui/draggable'; + + // ... + export class AppComponent { + z = 1; + + changeZIndex(element: HTMLElement) { + element.style.zIndex = this.z.toString(); + this.z++; + } + + handleDragStart(e: DxDraggableTypes.DragStartEvent) { + this.changeZIndex(e.element); + } + } + +##### Vue + + + + + + +##### React + + + import React, { JSX, useState, useCallback } from 'react'; + import { Draggable, type DraggableTypes } from 'devextreme-react/draggable'; + + function App(): JSX.Element { + const [, setZ] = useState(1); + + const changeZIndex = useCallback((element: HTMLElement) => { + setZ((prevValue) => { + element.style.zIndex = prevValue.toString(); + return prevValue + 1; + }); + }, []); + + const handleDragStart = useCallback((e: DraggableTypes.DragStartEvent) => { + changeZIndex(e.element); + }, []); + + return ( +
+ + + {/* ... */} +
+ ); + } + +--- + +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({ + // ... + }).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 can interact with each other (in `dxdragenter`, `dxdragleave`, and `dxdrop` handlers). From e887c391c8877146e8919021cf630c39b2fbc460 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 16 Jan 2026 15:03:48 +0400 Subject: [PATCH 11/13] Add group Definitions --- .../05 Getting Started with Draggable/15 Handle Events.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md index 81f1cf1834..c3f6e70e8b 100644 --- a/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/15 Handle Events.md @@ -127,6 +127,8 @@ To attach handlers to common events, call [Draggable.on()](/Documentation/ApiRef $(function() { $("#note-1").dxDraggable({ + group: 'cards', + // ... }).on({ "click": handleClick, @@ -157,6 +159,7 @@ To attach handlers to common events, call the [on()](/Documentation/ApiReference
@@ -204,6 +207,7 @@ To attach handlers to common events, call the [on()](/Documentation/ApiReference