Blazor draggable/resizable modal bootstrap dialog

Question

I've got a nice implementation of, curtesy of Kyle, for a Blazor component for a bootstrap modal dialog here: How to use Bootstrap modal in Blazor client app? But I would like to extend this solution to make the modal draggable & resizable.

The best approach (to avoid re-inventing the wheel) seems to be to use the JQuery UI draggable()/resizeable() functions. I've got this link to a demonstration of how to do this in pure Javascript: DRAG AND RESIZE BOOTSTRAP MODAL that essentially calls the resizeable and draggable functions on the modal divs

<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript">
    $('.modal-content').resizable({
        //alsoResize: ".modal-dialog",
        minHeight: 300,
        minWidth: 300
    });
    $('.modal-dialog').draggable();
</script>

I've tried adding this script to my _Host.cshtml page but it has no effect. Any advice on how to merge the blazor component solution with the jquery UI solution would be much appreciated

David

There's an article on my personal GitHub site that shows how to implement a simple Modal Dialog solution in Blazor in the context of a Edit Form - no JS, all C# Blazor. All the principles will probably apply to your situation. It's not resizable, but you can grab the code from the Repo and over to you if you want to use it. https://shauncurtis.github.io/articles/Modal-Editor.html — MrC aka Shaun Curtis, Mar 18 '21 at 12:43

score 3 · Answer 1 · answered Mar 18 '21 at 14:49

The answer is to explicitly call a javascript function in the OnAfterRenderAsync override to apply the JQuery UI functions to the modal divs.

E.g.

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await jsRuntime.InvokeVoidAsync("setModalDraggableAndResizable");
        await base.OnAfterRenderAsync(firstRender);
    }

where setModalDraggableAndResizable is a javascript function in the _Hosts.cshtml:

    <script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
    <script type="text/javascript">
        function setModalDraggableAndResizable() {
            $('.modal-content').resizable({
                //alsoResize: ".modal-dialog",
                minHeight: 300,
                minWidth: 300
            });
            $('.modal-dialog').draggable();
        }
    </script>

And the modal is now draggable and resizable...

Modal example image

David - While your answer may work it's lives in the "Hybrid" realm - i.e. half Blazor/half Javascript Framework. If you want to really move to the "Blazor" paradigm then think "No Javascript", except where I can critically justify there is no other answer: and I'm prepared to bet my house on it! — MrC aka Shaun Curtis, Mar 18 '21 at 22:27

Blazor draggable/resizable modal bootstrap dialog

1 Answers1