Implementing movable <div> in Blazor

user_767942 0
Viewed 3189

I am trying to implement as a component movable in Blazor, but I am not sure how to translate the JavaScript to Blazor. I am generally traying to achieve something like : https://stackoverflow.com/a/47596086/767942

  • How to handle @onmousedown and translate it to Blazor in order to achive the movable < div > from the example above ?
blazor-client-side blazor
1 Answers

Here is another way to do it using the ondragstart and ondragend event that I use to make a movable "popup 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;
    }
}
user_122275870
Related