DxPopup.DragCompleted Event

Fires when a user drops the Popup.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<PopupDragCompletedEventArgs> DragCompleted { get; set; }

Event Data

The DragCompleted event's data class is PopupDragCompletedEventArgs. The following properties provide information specific to this event:

Property	Description
CancellationToken	Specifies an object that propagates a cancellation notification.
End	Returns the Popup’s position after a drag-and-drop operation.
Start	Returns the Popup’s position before a drag-and-drop operation.

Remarks

When the AllowDrag property is set to true, users can drag the Popup. Handle the DragCompleted event to react to the Popup’s position change.

The example below shows how to prevent users from dropping the component outside the browser’s viewport:

<div @onclick="@(() => PopupVisible = true)">
    <p>CLICK TO SHOW A POP-UP WINDOW</p>
</div>

<DxPopup @bind-Visible="@PopupVisible"
         HeaderText="Header"
         BodyText="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet metus vel
                   nisi blandit tincidunt vel efficitur purus. Nunc nec turpis tempus, accumsan orci auctor,
                   imperdiet mauris. Fusce id purus magna."
         PositionX="PopupPositionX"
         PositionY="PopupPositionY"
         AllowDrag="true"
         DragCompleted="AfterDrag">
</DxPopup>

@code {
    bool PopupVisible { get; set; } = false;
    int? PopupPositionX { get; set; }
    int? PopupPositionY { get; set; }
    void AfterDrag(PopupDragCompletedEventArgs e) {
        PopupPositionX = Math.Max(0, e.End.X);
        PopupPositionY = Math.Max(0, e.End.Y);
    }
}

Note that the DragCompleted event also fires when you finish resizing the component by its edges.

Handle the DragStarted event to be notified when a user starts to drag the component.