Draggable in Blazor Dialog Component

2 Aug 20211 minute to read

The Dialog supports to drag within its target container by grabbing the Dialog header, which allows the user to reposition the Dialog dynamically.

@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.Buttons

<div id="target">
    <SfButton @onclick="@OpenDialog">Open Dialog</SfButton>

    <SfDialog Target="#target" Width="250px" AllowDragging="true" IsModal="true" ShowCloseIcon="true" @bind-Visible="@IsVisible">
            <Header> Dialog </Header>
            <Content> This is a Dialog with drag enabled </Content>
            <DialogButton Content="OK" IsPrimary="true" OnClick="@CloseDialog" />
            <DialogButton Content="Cancel" OnClick="@CloseDialog" />

    #target {
        min-height: 400px;
        height: 100%;
        position: relative;

@code {
    private bool IsVisible { get; set; } = true;

    private void OpenDialog()
        this.IsVisible = true;

    private void CloseDialog()
        this.IsVisible = false;