I am currently working on a popup component that needs to be movable. The default position is set to top:0;left:0;, causing the popup to appear in the top-left corner of the page. However, I want it to be centered on the page and then retrieve the Top Left coordinates of the div for further calculations.
This is the current setup:
<div class="child-window" draggable="true" style="position:absolute; top: @(offsetY)px; left: @(offsetX)px; border-color: black;" @ondragend="OnDragEnd" @ondragstart="OnDragStart">
<div class="cw-content">
@Content
</div>
</div>
@code {
private double startX, startY, offsetX, offsetY;
protected override void OnInitialized() {
base.OnInitialized();
ResetStartPosition();
}
private void ResetStartPosition() {
//Code to set offsetX & offsetY to the top left div position goes here
}
private void OnDragStart(DragEventArgs args) {
startX = args.ClientX;
startY = args.ClientY;
}
private void OnDragEnd(DragEventArgs args) {
offsetX += args.ClientX - startX;
offsetY += args.ClientY - startY;
}
}