Draggable

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

<div id="target">
    <EjsButton @onclick="@OnClicked">Open Dialog</EjsButton>
    <EjsDialog @ref="DialogObj" Target="#target" Width="250px" AllowDragging="true" IsModal="true" ShowCloseIcon="true">
        <DialogTemplates>
            <Header> Dialog</Header>
            <Content> This is a Dialog with drag enabled</Content>
        </DialogTemplates>
        <DialogButtons>
            <DialogButton ButtonModel="@OkBtn" OnClick="@OnClick" />
            <DialogButton ButtonModel="@CancelBtn" OnClick="@OnClick" />
        </DialogButtons>
    </EjsDialog>
</div>

<style>
    #target {
        min-height: 450px;
        height: 100%;
    }
</style>

@code {
    EjsDialog DialogObj;

    private void OnClick(Object args)
    {
        this.DialogObj.Hide();
    }

    private void OnClicked() {
        this.DialogObj.Show();
    }

    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel OkBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "OK", IsPrimary = true };
    public Syncfusion.EJ2.Blazor.Buttons.ButtonModel CancelBtn = new Syncfusion.EJ2.Blazor.Buttons.ButtonModel { Content = "Cancel" };
}