Cześć,
mam prosty component Window napisany w blazor, którego celem jest utworzenie div-a o zadanych stylach css (głównie rozmiar i położenie). Po kliknięciu w tego div-a myszką można go przesunąć (zmienić właściwość Top i Left).
Gdy utworzę jeden taki komponent to jest wszystko ok (mogę go przesuwać bez problemów).
Gdy utworzę drugi komponent wewnątrz tego pierwszego to również jest jeszcze ok.
Gdy utworzyłem trzeci komponent w tym drugim to mogę przesunąć utworzonego div-a, ale jak przesunę myszką i wyjdę poza obszar tego div-a to div wraca na swoje pierwotne położenie (resetuje się właściwość Top i Left). Taki problem jest tylko z tym trzecim div-em (pozostałe działają prawidłowo - nie resetują się).
Gdy w tym trzecim componencie dodałem jeszcze komentarze (dwa akapity) to drugi component również zaczął zachowywać się analogicznie tj. po przesunięciu w inne miejsce i wyjściu myszą poza obszar tego div-a element wraca na swoje pierwotne położenie...
Problem dotyczy chyba tylko położenia - Top i Left, bo np. właściwość border nie jest przywracana (gdy zaimplementowałem np. zwiększenie borderu o 2 po kliknięciu w div-a to po resecie Top i Left obramowanie zostanie pogrubione).
Czy orientuje się ktoś co może być tego przyczyną?
Poniżej mój kod:
Component Window:
<div
@onmouseup=@(() => OnMouseUp())
@onmousemove=@(e => OnMouseMove(e))
@onmousedown=@(e => OnMouseDown(e))
@onclick=@(() => OnClick())
@onmouseleave=@(() => OnMouseOut())
@onclick:stopPropagation=true
@onmousemove:stopPropagation=true
@onmousedown:stopPropagation=true
@onmouseup:stopPropagation=true
style="position: absolute;
border: solid @(border_size)px;
width: @(Width)px;
height: @(Height)px;
top: @(Top)px;
left: @(Left)px;
background-color: @(BackgroundColor);">
@ChildContent
</div>
@code {
bool IsFocused = false;
void OnClick()
{
}
public void OnMouseMove(MouseEventArgs e)
{
if(IsFocused)
{
Top += (int)e.MovementY;
Left += (int)e.MovementX;
}
}
public void OnMouseOut()
{
IsFocused = false;
Align();
}
public void OnMouseDown(MouseEventArgs e)
{
IsFocused = true;
}
public void OnMouseUp()
{
IsFocused = false;
Align();
}
void Align()
{
if(Top % 10 != 0)
{
Top += 5;
Top /= 10;
Top *= 10;
}
if(Left % 10 != 0)
{
Left += 5;
Left /= 10;
Left *= 10;
}
}
[Parameter]
public RenderFragment? ChildContent { get; set; }
[Parameter]
public int Width { get; set; } = 1000;
[Parameter]
public int Height { get; set; } = 1000;
[Parameter]
public int Top { get; set; } = 100;
[Parameter]
public int Left { get; set; } = 100;
[Parameter]
public string BackgroundColor { get; set; } = "teal";
public int border_size = 3;
}
Strona główna:
@page "/"
<h1>Hello, world!</h1>
<Window>
<Window Width="700"
Height="500"
Top="40"
Left="50"
BackgroundColor="pink">
<Window Width="300"
Height="200"
Top="40"
Left="50"
BackgroundColor="yellow">
<p>Dodanie tego okna powoduje, że jak przesuwam okno różowe i wyjdę myszką poza obszar różowego okna to okno różowe wraca na swoje pierwotne miejsce (właściwości top i left się resetują)...</p>
<p>Dodanie powyższego tekstu sprawiło, że to okno (żółte) również zachowuje się w analogiczny sposób tj. można je przesuwać, ale jak wyjdziemy myszką poza obszar tego okna to wraca ono na swoje pierwotne miejsce...</p>
</Window>
</Window>
</Window>