在Blazor中实现可移动<div>

Question

我正在尝试实现作为一个可移动的组件在Blazor，但我不知道如何将JavaScript转换成Blazor。我通常试图实现这样的目标：https://stackoverflow.com/a/47596086/767942

• 如何处理@onmousedown并将其翻译到Blazor，以实现上面示例中的可移动< div > ?

Answer 1

下面是另一种使用ondragstart和ondragend事件来实现它的方法，该事件用于创建一个可移动的“弹出窗口”。

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