如何通過鼠標拖動圖像

Question

當我嘗試使用Blazor用鼠標拖動圖像時遇到一個問題。 第一次，我想它可以由OnMouseMove，OnMouseDown和OnMouseUp實現。 但是我發現在單擊鼠標然后移動指針后無法觸發MouseMove事件，從而觸發了OnDrag事件。 但是，當我按下鼠標單擊時，再次觸發了OnDrag事件，但ScreenX / ClientX / ScreenY / ClientY的值為0。

<div style="position:relative; width:1000px; height:800px;"
     @onmousedown="@OnMouseDown"
     @onmouseup="@OnMouseUp"
     @onmousemove="@OnMouseMove">

    <img src="https://www.devexpress.com/products/i/news/devexpress-blazor-razor-thumbnail-hd.png"
         style="position:absolute; top: @(offsetY)px; right: @(offsetX)px;" />
</div>
@code{

    double x, y, offsetX, offsetY;
    bool isDragging;


    void OnDrag(UIDragEventArgs args)
    {
        Console.WriteLine("OnDrag");
        if (!isDragging) return;

        var endX = args.ClientX;
        var endY = args.ClientY;
        var dx = endX - x;
        var dy = endY - y;

        offsetX += dx;
        offsetY += dy;

        x = args.ClientX;
        y = args.ClientY;

        StateHasChanged();
    }

    void OnMouseMove(UIMouseEventArgs args)
    {
        Console.WriteLine("OnMouseMove");
        if (!isDragging) return;

        var endX = args.ClientX;
        var endY = args.ClientY;
        var dx = endX - x;
        var dy = endY - y;

        offsetX += dx;
        offsetY += dy;

        x = args.ClientX;
        y = args.ClientY;

        StateHasChanged();
    }

    void OnMouseDown(UIMouseEventArgs args)
    {
        x = args.ClientX;
        y = args.ClientY;
        isDragging = true;
    }

    void OnMouseUp(UIMouseEventArgs args)
    {
        isDragging = false;
    }
}

Answer 1

這有點粗糙，但這似乎可行（請注意左側：）：

<div style="position:relative; width:1000px; height:800px;"
     @ondragend="OnDragEnd"
     @ondragstart="@OnDragStart">

    <img src="https://www.devexpress.com/products/i/news/devexpress-blazor-razor-thumbnail-hd.png"
         style="position:absolute; top: @(offsetY)px; left: @(offsetX)px;" />
</div>

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

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

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

}