Blazor Server应用中如何基于保存的Top、Left位置正确渲染拖拽组件

这个问题很常见——你已经把组件的位置数据存在了数据库里，但目前的代码只是把位置值传给了子组件，却没有将其应用到承载组件的<div>元素的定位样式上，所以所有绝对定位的元素默认都会从父容器的左上角开始布局，自然就堆叠在一起了。

直接修改循环代码，应用位置样式 #

你只需要在承载组件的<div>上通过内联样式绑定top和left属性，把数据库里保存的位置值直接作用到元素上即可：

@foreach (var group in MyModel) { 
    <div class="draggable position-absolute" 
         id="@group.AddId"
         style="top: @($"{group.TopPosition}px"); left: @($"{group.LeftPosition}px"); "> 
        <MyComponent Id="@group.AddId" 
                     GroupDescription="@group.Description" 
                     TopPosition="@group.TopPosition" 
                     LeftPosition="@group.LeftPosition"> 
        </MyComponent> 
    </div> 
}

关键细节说明 #

1. 单位处理：代码里假设你数据库中保存的是不带单位的像素数值（比如150、200），所以通过字符串拼接加上了px。如果你的数据库里已经存储了带单位的值（比如"150px"），直接写成top: @group.TopPosition即可。
2. 父容器定位：确保这些<div>的父容器设置了position: relative（比如添加position-relative类），这样组件的定位会基于这个父容器，而不是整个浏览器窗口，避免出现位置偏移的问题：

   <div class="position-relative" style="width: 100%; height: calc(100vh - 60px);">
       @foreach (var group in MyModel) { 
           <!-- 上面的组件div代码 -->
       }
   </div>
   

这样修改后，页面加载时每个组件都会根据你保存的TopPosition和LeftPosition值，精确显示在对应的位置上，不会再出现堆叠的情况。

内容的提问来源于stack exchange，提问作者Baba