Draggable: Add Getting Started

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%);
+}

applications/GettingStartedWith/Draggable/index.html

@@ -0,0 +1,37 @@
+<div class="demo-container">
+    <div class="board">
+
+        <div id="note-1" class="card">
+            <div class="color-indicator blue"></div>
+            <div class="text-container">
+                <div class="body-text-box">Install New Router in Dev Room</div>
+                <div class="detail-text-box">Amelia Harper</div>
+            </div>
+        </div>
+
+        <div id="note-2" class="card">
+            <div class="color-indicator green"></div>
+            <div class="text-container">
+                <div class="body-text-box">Launch New Website</div>
+                <div class="detail-text-box">Brett Wade</div>
+            </div>
+        </div>
+
+        <div id="note-3" class="card">
+            <div class="color-indicator red"></div>
+            <div class="text-container">
+                <div class="body-text-box">Prepare 2026 Marketing Plan</div>
+                <div class="detail-text-box">Robert Reagan</div>
+            </div>
+        </div>
+
+        <div id="note-4" class="card">
+            <div class="color-indicator yellow"></div>
+            <div class="text-container">
+                <div class="body-text-box">Approve Personal Computer Upgrade Plan</div>
+                <div class="detail-text-box">Bart Arnaz</div>
+            </div>
+        </div>
+
+    </div>
+</div>

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", "");
+  }
+});

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.
+
+<div class="simulator-desktop-container" data-view="/Content/Applications/25_2/GettingStartedWith/Draggable/index.html, /Content/Applications/25_2/GettingStartedWith/Draggable/index.js, /Content/Applications/25_2/GettingStartedWith/Draggable/index.css" style="border-radius: 16px"></div>
+
+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"
+}

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:
+
+    <!-- tab: index.js -->
+    $(function() {
+        $("#draggable").dxDraggable({});
+    });
+
+    <!-- tab: index.html -->
+    <html>
+        <head>
+            <!-- ... -->
+            <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+            <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_25_2/css/dx.fluent.blue.light.css">
+            <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/minor_25_2/js/dx.all.js"></script>
+            <script type="text/javascript" src="index.js"></script>
+        </head>
+        <body class="dx-viewport">
+            <div id="draggable"></div>
+        </body>
+    </html>
+
+##### 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:
+
+    <!-- tab: app.component.html -->
+    <dx-draggable></dx-draggable>
+
+    <!-- tab: app.component.ts -->
+    import { Component } from '@angular/core';
+    import { type DxDraggableTypes } from 'devextreme-angular/ui/draggable';
+
+    <!-- tab: app.module.ts -->
+    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 { }
+
+    <!-- tab: angular.json -->
+    {
+        // ...
+        "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:
+
+    <!-- tab: App.vue -->
+    <template>
+        <DxDraggable />
+    </template>
+
+    <script setup lang="ts">
+    import { DxDraggable, type DxDraggableTypes } from 'devextreme-vue/draggable';
+    import 'devextreme/dist/css/dx.fluent.blue.light.css';
+
+    </script>
+
+##### 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:
+
+    <!-- tab: App.tsx -->
+    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 />
+        );
+    }
+
+---
+
+Draggable does not include default visual elements. Specify custom Draggable markup as follows:
+
+---
+
+##### jQuery
+
+    <!-- tab: index.js -->
+    $(function() {
+        $("#note-1").dxDraggable({});
+    });
+
+    <!-- tab: index.html -->
+    <html>
+        <head>
+            <!-- ... -->
+            <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+            <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/minor_25_2/css/dx.fluent.blue.light.css">
+            <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/minor_25_2/js/dx.all.js"></script>
+            <script type="text/javascript" src="index.js"></script>
+        </head>
+        <body class="dx-viewport">
+            <div id="note-1" class="card">
+                <div class="color-indicator blue"></div>
+                <div class="text-container">
+                    <div class="body-text-box">Install New Router in Dev Room</div>
+                    <div class="detail-text-box">Amelia Harper</div>
+                </div>
+            </div>
+        </body>
+    </html>
+
+##### Angular
+
+    <!-- tab: app.component.html -->
+    <dx-draggable id="note-1" class="card">
+        <div class="color-indicator blue"></div>
+        <div class="text-container">
+            <div class="body-text-box">Install New Router in Dev Room</div>
+            <div class="detail-text-box">Amelia Harper</div>
+        </div>
+    </dx-draggable>
+
+##### Vue
+
+    <!-- tab: App.vue -->
+    <template>
+        <DxDraggable id="note-1" class="card">
+            <div class="color-indicator blue"></div>
+            <div class="text-container">
+                <div class="body-text-box">Install New Router in Dev Room</div>
+                <div class="detail-text-box">Amelia Harper</div>
+            </div>
+        </DxDraggable>
+    </template>
+
+##### React
+
+    <!-- tab: App.tsx -->
+    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 id="note-1" className="card">
+                <div class="color-indicator blue"></div>
+                <div class="text-container">
+                    <div class="body-text-box">Install New Router in Dev Room</div>
+                    <div class="detail-text-box">Amelia Harper</div>
+                </div>
+            </Draggable>
+        );
+    }
+
+---
+
+This example creates four Draggable components inside a common `.board` container:
+