From 0e9458691ade73663cccdf23dcfe50f27962a45d Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Fri, 26 Dec 2025 08:54:38 +0400 Subject: [PATCH 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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", ""); + } });