From 4a0b20c5261bb43d4ebac261b1548651871c74d1 Mon Sep 17 00:00:00 2001 From: Peace Date: Mon, 22 Jul 2024 16:30:03 +0900 Subject: [PATCH] drag and drop --- .../Components/Layout/NavMenu.razor | 1 + .../Pages/Components/CompoDrag.razor | 54 +++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 BlazorFluentUI/Components/Pages/Components/CompoDrag.razor diff --git a/BlazorFluentUI/Components/Layout/NavMenu.razor b/BlazorFluentUI/Components/Layout/NavMenu.razor index 5ead8c8..85aa6a8 100644 --- a/BlazorFluentUI/Components/Layout/NavMenu.razor +++ b/BlazorFluentUI/Components/Layout/NavMenu.razor @@ -60,6 +60,7 @@ DataGrid Dialog Divider + Drag diff --git a/BlazorFluentUI/Components/Pages/Components/CompoDrag.razor b/BlazorFluentUI/Components/Pages/Components/CompoDrag.razor new file mode 100644 index 0000000..ac4ad11 --- /dev/null +++ b/BlazorFluentUI/Components/Pages/Components/CompoDrag.razor @@ -0,0 +1,54 @@ +@page "/compodrag" + +@rendermode RenderMode.InteractiveServer + +

Drag and Drop

+ +
+ The FluentDragContainer implements a web component HTML Drag And Drop API(Horizontal Rule) element. +
+ + +

Example

+ + + + +
+ Item1 +
+
+ +
+ Item2 +
+
+
+
+

Message: @message

+
+ +@code { + string? message; + + async void OnDragEnter(FluentDragEventArgs e) + { + message = $"{e.Source.Id} entered in {e.Target.Id}"; + await InvokeAsync(StateHasChanged); + } + + async void OnDragLeave(FluentDragEventArgs e) + { + message = $"{e.Source.Id} has left in {e.Target.Id}"; + await InvokeAsync(StateHasChanged); + } + + async void OnDropEnd(FluentDragEventArgs e) + { + message = $"{e.Source.Id} droped in {e.Target.Id}"; + await InvokeAsync(StateHasChanged); + } +}