c# - Blazor 获取 div 位置/坐标

Question

我正在创建一个弹出组件，我希望它是可移动的。我可以使用顶部/左侧样式移动它，但现在它们被初始化为 top:0;left:0;因此弹出窗口出现在页面的左上 Angular 。我希望让它出现在页面的中心，然后获取我的 div 的左上 Angular 坐标，以便在之后正确管理我的计算。

这是我现在所拥有的:

<div class="child-window" draggable="true" style="position:absolute; top: @(offsetY)px; left: @(offsetX)px; border-color: black;" @ondragend="OnDragEnd" @ondragstart="OnDragStart">
   <div class="cw-content">
      @Content
   </div>
</div>

@code {
   private double startX, startY, offsetX, offsetY;

   protected override void OnInitialized() {
        base.OnInitialized();
        ResetStartPosition();
    }

   private void ResetStartPosition() {
        //Set offsetX & offsetY to the top left div position
    }

   private void OnDragStart(DragEventArgs args) {
        startX = args.ClientX;
        startY = args.ClientY;
    }

    private void OnDragEnd(DragEventArgs args) {
        offsetX += args.ClientX - startX;
        offsetY += args.ClientY - startY;
    }
}

Answer 1

目前只能使用 JS

public class BoundingClientRect
{
    public double X { get; set; }
    public double Y { get; set; }
    public double Width { get; set; }
    public double Height { get; set; }
    public double Top { get; set; }
    public double Right { get; set; }
    public double Bottom { get; set; }
    public double Left { get; set; }
}

private async Task OnElementClick(MouseEventArgs e)
{
    var result = await JSRuntime.InvokeAsync<BoundingClientRect>("MyDOMGetBoundingClientRect", MyElementReference);

    var x = (int) (e.ClientX - result.Left);
    var y = (int) (e.ClientY - result.Top);
   
   // now you can work with the position relative to the element.
}

和

<script> MyDOMGetBoundingClientRect = (element, parm) => { return element.getBoundingClientRect(); }; </script>