实现可移动<；部门>；在Blazor

我试图在Blazor中实现一个可移动的组件，但我不确定如何将JavaScript翻译成Blazor。 我通常会努力实现以下目标：

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

---

这里是另一种方法，使用我用来创建可移动的“弹出窗口”的

ondragstart

和

ondragend

事件

你的内容
@代码
{
专用双startX、startY、offsetX、offsetY；
私有void OnDragStart（DragEventArgs args）{
startX=args.ClientX；
startY=args.ClientY；
}
私有无效的OnDragEnd（DragEventArgs args）
{
offsetX+=args.ClientX-startX；
offsetY+=args.ClientY-startY；
}
}

onmousedown

在Blazor上提供。不需要JS。相关的更多信息：我刚刚提出了与你发布的示例相同的想法（一直在研究它），但两者都相当粗。结果并不像我前面提到的例子中那样平滑拖动。

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