Implementing movable
in Blazor

Question

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 ?

`onmousedown` is available on Blazor. No JS needed. Related https://stackoverflow.com/questions/57306208/how-to-drag-an-image-by-mouse More info: https://chrissainty.com/investigating-drag-and-drop-with-blazor/ — dani herrera, Oct 11 '19 at 18:20
I've just went to the same idea (as keeping researching on it) as the examples you have posted, but both is rather chunky. The result is not smooth dragging feeling like in the example which i've pointed. — Yordan Yanakiev, Oct 11 '19 at 19:18

score 14 · Accepted Answer · edited May 25 '21 at 14:44

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

This is not smooth dragging like you can achieve with javascript though. — Adrian Tollis, Dec 31 '21 at 05:45

Implementing movable in Blazor

1 Answers1

Implementing movable
in Blazor