问题描述

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

这是我现在拥有的：

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

推荐答案

目前只能使用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>

这篇关于Blazor获取div位置/坐标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！