Draggable: Add Getting Started

applications/GettingStartedWith/Draggable/index.css

@@ -0,0 +1,118 @@
+body {
+    padding: 0;
+}
+
+.demo-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    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;
+    color: var(--dx-color-icon)
+}
+
+.board {
+    background-color: light-dark(#F5F5F5, #141414);
+    outline: 1px dashed light-dark(#E0E0E0, #525252);
+    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;
+    padding: 12px;
+}
+
+@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: 0;
+    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: var(--dx-color-primary);
+}
+
+.color-indicator.green {
+    background-color: var(--dx-color-success);
+}
+
+.color-indicator.red {
+    background-color: var(--dx-color-danger);
+}
+
+.color-indicator.yellow {
+    background-color: var(--dx-color-warning);
+}
+
+.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%);
+}
+
+.card.overlapped {
+    outline: 1px dashed var(--dx-color-primary);
+}

applications/GettingStartedWith/Draggable/index.html

@@ -0,0 +1,39 @@
+<div class="demo-container">
+    <div class="boundary-text">Dragging Boundary</div>
+    <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 class="boundary-text">Dragging Boundary</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) {
+    el.css("z-index", z);
+    z++;
+  }
+
+  function handleClick(e) {
+    changeZIndex($(e.currentTarget));
+  }
+
+  function handleDragStart(e) {
+    changeZIndex($(e.element[0]));
+  }
+
+  function handleDragEnter(e) {
+    e.target.classList.add('overlapped');
+  }
+
+  function handleDragStop(e) {
+    e.target.classList.remove('overlapped');
+  }
+});

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.
+- Configure Draggable options.
+- Handle events (specific to Draggable, as well as common events).
+
+<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; height: 524px;"></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"
+}