drag and drop

BlazorFluentUI/Components/Layout/NavMenu.razor

@@ -60,6 +60,7 @@
                 <FluentNavLink Href="compodatagrid" Icon="@(new Icons.Regular.Size20.Grid())" IconColor="Color.Accent">DataGrid</FluentNavLink>
                 <FluentNavLink Href="compodialog" Icon="@(new Icons.Regular.Size20.AppTitle())" IconColor="Color.Accent">Dialog</FluentNavLink>
                 <FluentNavLink Href="compodivider" Icon="@(new Icons.Regular.Size20.DividerShort())" IconColor="Color.Accent">Divider</FluentNavLink>
+                <FluentNavLink Href="compodrag" Icon="@(new Icons.Regular.Size20.Drag())" IconColor="Color.Accent">Drag</FluentNavLink>
 
             </FluentNavGroup>
         </FluentNavMenu>

BlazorFluentUI/Components/Pages/Components/CompoDrag.razor

@@ -0,0 +1,54 @@
+@page "/compodrag"
+
+@rendermode RenderMode.InteractiveServer
+
+<h3>Drag and Drop</h3>
+<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
+<div>
+    The <code>FluentDragContainer</code> implements a web component <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API">HTML Drag And Drop API</a>(Horizontal Rule) element.
+</div>
+
+
+<h4 class="mt-4">Example</h4>
+<FluentCard Class="mt-3" Width="auto" Height="auto" AreaRestricted="false">
+    <FluentDragContainer TItem="string"
+                         OnDragEnter="@OnDragEnter"
+                         OnDragLeave="@OnDragLeave"
+                         OnDropEnd="@OnDropEnd">
+        <FluentStack>
+            <FluentDropZone Id="Item1" Draggable="true" Droppable="true">
+                <div style="width:100px; height:100px; background-color:salmon">
+                    Item1
+                </div>
+            </FluentDropZone>
+            <FluentDropZone Id="Item2" Draggable="true" Droppable="true">
+                <div style="width:100px; height:100px; background-color:limegreen">
+                    Item2
+                </div>
+            </FluentDropZone>
+        </FluentStack>
+    </FluentDragContainer>
+    <p><b>Message</b>: @message</p>
+</FluentCard>
+
+@code {
+    string? message;
+
+    async void OnDragEnter(FluentDragEventArgs<string> e)
+    {
+        message = $"{e.Source.Id} entered in {e.Target.Id}";
+        await InvokeAsync(StateHasChanged);
+    }
+
+    async void OnDragLeave(FluentDragEventArgs<string> e)
+    {
+        message = $"{e.Source.Id} has left in {e.Target.Id}";
+        await InvokeAsync(StateHasChanged);
+    }
+
+    async void OnDropEnd(FluentDragEventArgs<string> e)
+    {
+        message = $"{e.Source.Id} droped in {e.Target.Id}";
+        await InvokeAsync(StateHasChanged);
+    }
+}