diff --git a/applications/GettingStartedWith/Draggable/index.css b/applications/GettingStartedWith/Draggable/index.css new file mode 100644 index 0000000000..45ceda2a93 --- /dev/null +++ b/applications/GettingStartedWith/Draggable/index.css @@ -0,0 +1,97 @@ +.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: 320px; + width: 100%; + height: 500px; + display: grid; + grid-template-columns: repeat(4, 1fr); + align-content: start; + gap: 8px; + border-radius: 8px; +} + +@media (width < 850px) { + .board { + 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 { + z-index: 1; + max-width: 320px; + min-width: 180px; + width: 100%; + min-height: 84px; + max-height: 84px; + border-radius: 8px; + background-color: light-dark(#FFF, #292929); + display: flex; + box-shadow: 0 0 2px rgba(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, #999); +} + +.card.dx-draggable-dragging { + box-shadow: 0 4px 8px rgba(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..19e3b156a8 --- /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..505beacdba --- /dev/null +++ b/applications/GettingStartedWith/Draggable/index.js @@ -0,0 +1,68 @@ +$(() => { + let z = 1; + + $("#note-1").dxDraggable({ + onDragStart: handleDragStart, + boundary: ".board", + group: "cards", + }).on({ + "click": handleClick, + "dxdragenter": handleDragEnter, + "dxdragleave": handleDragStop, + "dxdrop": handleDragStop, + }); + + $("#note-2").dxDraggable({ + onDragStart: handleDragStart, + group: "cards", + boundary: ".board", + }).on({ + "click": handleClick, + "dxdragenter": handleDragEnter, + "dxdragleave": handleDragStop, + "dxdrop": handleDragStop, + }); + + $("#note-3").dxDraggable({ + onDragStart: handleDragStart, + group: "cards", + boundary: ".board", + }).on({ + "click": handleClick, + "dxdragenter": handleDragEnter, + "dxdragleave": handleDragStop, + "dxdrop": handleDragStop, + }); + + $("#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 handleClick(e) { + changeZIndex($(e.currentTarget)); + } + + function handleDragStart(e) { + changeZIndex($(e.element[0])); + } + + function handleDragEnter(e) { + $(e.target).css("outline", "1px dashed red"); + } + + function handleDragStop(e) { + $(e.target).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 new file mode 100644 index 0000000000..1927221df4 --- /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 (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: + +#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..7dba290e27 --- /dev/null +++ b/concepts/05 UI Components/Draggable/05 Getting Started with Draggable/05 Create Draggable.md @@ -0,0 +1,175 @@ +--- + +##### 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 ( + + ); + } + +--- + +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/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