根据页面的顶部和左侧位置在页面上显示 Blazor 组件答案

【问题标题】：Displaying Blazor components on a page based on its top and left position根据页面的顶部和左侧位置在页面上显示 Blazor 组件
【发布时间】：2021-11-28 20:03:35
【问题描述】：

我有一个 Blazor 服务器应用程序，页面上的组件很少。这些组件是可拖动的，当用户拖动时，我保存每个数据库的顶部位置和左侧位置。

我使用下面的循环在我的页面上和加载时显示组件组件相互堆叠。

     @foreach (var group in MyModel)
        {
            <div class="draggable position-absolute" id="@extgroup.AddId">
                <MyComponent
                    Id="@extgroup.AddId"
                    GroupDescription="@extgroup.Description"
                    TopPosition="@extgroup.TopPosition"
                    LeftPosition="@extgroup.LeftPosition">
                </MyComponent>
            </div>
        }

如何将组件显示在它们所在的确切位置保存，因为我有顶部位置和左侧位置的所有值？

谢谢。

【问题讨论】：

组件没有内在位置。具有位置的是组件内的 HTML 元素。所以：
它们都在一个 div 中，我该怎么做呢？
我推荐把class="draggable position-absolute"放在组件里面，让组件自己保存和加载位置，也就是让它成为真正的独立控件。我会将整个 extgroup 作为单个参数传递给组件。

标签： javascript c# jquery css blazor-server-side

【解决方案1】：

MyComponent.razor

<div style="position:absolute; left: @extgroup.LeftPosition; top: @extgroup.TopPosition">

   (Put your content here)

</div>

【讨论】：