jquery-ui - Blazor 可拖动/可调整大小的模态 Bootstrap 对话框

Question

我有一个很好的实现，由 Kyle 提供，用于引导模式对话框的 Blazor 组件:How to use Bootstrap modal in Blazor client app?但我想扩展此解决方案以使模态可拖动和可调整大小。

最好的方法(避免重新发明轮子)似乎是使用 JQuery UI draggable()/resizeable() 函数。我有这个链接可以演示如何在纯 Javascript 中执行此操作:DRAG AND RESIZE BOOTSTRAP MODAL本质上调用模态 div 上的可调整大小和可拖动函数

<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>

我已尝试将此脚本添加到我的 _Host.cshtml 页面，但没有效果。非常感谢有关如何将 blazor 组件解决方案与 jquery UI 解决方案合并的任何建议

大卫

Answer 1

答案是在 OnAfterRenderAsync 重写中显式调用 javascript 函数，以将 JQuery UI 函数应用于模式 div。

例如

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

其中 setModalDraggableAndResizable 是 _Hosts.cshtml 中的一个 javascript 函数:

    <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>

模态窗口现在可以拖动和调整大小了...

Modal example image