在 Blazor 中实现可移动 <div>

Question

我正在尝试将其实现为 Blazor 中的可移动组件，但我不确定如何将 JavaScript 转换为 Blazor。我通常正在努力实现类似的目标：

如何处理 @onmousedown 并将其转换为 Blazor 以实现上述示例中的可移动 < div >？

Answer 1

这是使用 ondragstart 和 ondragend 事件的另一种方法，我用它来制作可移动的“弹出窗口 window”。

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

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

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

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

在 Blazor 中实现可移动 <div>

Implementing movable <div> in Blazor

blazor

blazor-client-side