Add an event "ondragend" (#2504)

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -3902,6 +3902,11 @@
             This event is fired when the user starts dragging an element.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDragContainer`1.OnDragEnd">
+            <summary>
+            This event is fired when the drag operation ends (such as releasing a mouse button or hitting the Esc key).
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDragContainer`1.OnDragEnter">
             <summary>
             This event is fired when a dragged element enters a valid drop target.
@@ -3986,6 +3991,11 @@
             This event is fired when the user starts dragging an element.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1.OnDragEnd">
+            <summary>
+            This event is fired when the drag operation ends (such as releasing a mouse button or hitting the Esc key).
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1.OnDragEnter">
             <summary>
             This event is fired when a dragged element enters a valid drop target.
@@ -4012,6 +4022,9 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1.OnDragStartHandler(Microsoft.AspNetCore.Components.Web.DragEventArgs)">
             <summary />
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1.OnDragEndHandler(Microsoft.AspNetCore.Components.Web.DragEventArgs)">
+            <summary />
+        </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1.OnDragEnterHandler(Microsoft.AspNetCore.Components.Web.DragEventArgs)">
             <summary />
         </member>

examples/Demo/Shared/Pages/Drag/Examples/DragDropBasic.razor

@@ -1,4 +1,5 @@
-<FluentDragContainer TItem="string"
+<FluentDragContainer TItem="string"
+                     OnDragEnd="@(e => DemoLogger.WriteLine($"{e.Source.Id} drag ended"))"
                      OnDragEnter="@(e => DemoLogger.WriteLine($"{e.Source.Id} is entered in  {e.Target.Id}"))"
                      OnDragLeave="@(e => DemoLogger.WriteLine($"{e.Source.Id} has left {e.Target.Id}"))"
                      OnDropEnd="@(e => DemoLogger.WriteLine($"{e.Source.Id} dropped in {e.Target.Id}"))">
@@ -14,4 +15,4 @@
             </div>
         </FluentDropZone>
     </FluentStack>
-</FluentDragContainer>
+</FluentDragContainer>

src/Core/Components/Drag/FluentDragContainer.razor.cs

@@ -28,6 +28,12 @@ public partial class FluentDragContainer<TItem> : FluentComponentBase
     [Parameter]
     public Action<FluentDragEventArgs<TItem>>? OnDragStart { get; set; }
 
+    /// <summary>
+    /// This event is fired when the drag operation ends (such as releasing a mouse button or hitting the Esc key).
+    /// </summary>
+    [Parameter]
+    public Action<FluentDragEventArgs<TItem>>? OnDragEnd { get; set; }
+
     /// <summary>
     /// This event is fired when a dragged element enters a valid drop target.
     /// </summary>

src/Core/Components/Drag/FluentDropZone.razor

@@ -1,4 +1,4 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
 
 @typeparam TItem
@@ -14,6 +14,7 @@
      @ondragenter:preventDefault="@Droppable"
      @ondragleave=@OnDragLeaveHandler
      @ondragleave:preventDefault="@Droppable"
+     @ondragend=@OnDragEndHandler
      @ondrop=@OnDropHandler @ondrop:preventDefault>
     @ChildContent
-</div>
+</div>

src/Core/Components/Drag/FluentDropZone.razor.cs

@@ -52,6 +52,12 @@ public partial class FluentDropZone<TItem> : FluentComponentBase
     [Parameter]
     public Action<FluentDragEventArgs<TItem>>? OnDragStart { get; set; }
 
+    /// <summary>
+    /// This event is fired when the drag operation ends (such as releasing a mouse button or hitting the Esc key).
+    /// </summary>
+    [Parameter]
+    public Action<FluentDragEventArgs<TItem>>? OnDragEnd { get; set; }
+
     /// <summary>
     /// This event is fired when a dragged element enters a valid drop target.
     /// </summary>
@@ -100,6 +106,25 @@ public partial class FluentDropZone<TItem> : FluentComponentBase
         }
     }
 
+    /// <summary />
+    private void OnDragEndHandler(DragEventArgs e)
+    {
+        if (!Draggable)
+        {
+            return;
+        }
+
+        if (OnDragEnd != null)
+        {
+            OnDragEnd(new FluentDragEventArgs<TItem>(this, this));
+        }
+
+        if (Container.OnDragEnd != null)
+        {
+            Container.OnDragEnd(new FluentDragEventArgs<TItem>(this, this));
+        }
+    }
+
     /// <summary />
     private void OnDragEnterHandler(DragEventArgs e)
     {

tests/Core/Drag/FluentDragTests.cs

@@ -15,6 +15,7 @@ public class FluentDragTests : TestBase
         var cut = ctx.RenderComponent<FluentDragContainer<int>>(parameters =>
         {
             parameters.Add(p => p.OnDragStart, (e) => { });
+            parameters.Add(p => p.OnDragEnd, (e) => { });
             parameters.Add(p => p.OnDragEnter, (e) => { });
             parameters.Add(p => p.OnDragOver, (e) => { });
             parameters.Add(p => p.OnDragLeave, (e) => { });
@@ -27,6 +28,7 @@ public class FluentDragTests : TestBase
                 zone.AddChildContent("Item 1");
 
                 zone.Add(p => p.OnDragStart, (e) => { });
+                zone.Add(p => p.OnDragEnd, (e) => { });
                 zone.Add(p => p.OnDragEnter, (e) => { });
                 zone.Add(p => p.OnDragOver, (e) => { });
                 zone.Add(p => p.OnDragLeave, (e) => { });
@@ -40,6 +42,7 @@ public class FluentDragTests : TestBase
                 zone.AddChildContent("Item 2");
 
                 zone.Add(p => p.OnDragStart, (e) => { });
+                zone.Add(p => p.OnDragEnd, (e) => { });
                 zone.Add(p => p.OnDragEnter, (e) => { });
                 zone.Add(p => p.OnDragOver, (e) => { });
                 zone.Add(p => p.OnDragLeave, (e) => { });