Table Resizable blocks dropping row

[NeoCoderMatrix86]

Hello together,
I'm currently working on a Table with draggable rows in order to reorder them. Therefore I implemented the following table:

<Table Bordered Resizable="tableRizable" ResizeMode="TableResizeMode.Columns" Narrow>
    <TableHeader ThemeContrast="ThemeContrast.Light">
        <TableRow>
		[....]
		</TableRow>
	</TableHeader>
	<TableBody>
		<TableRow Draggable DragStart="() => OnDragStart(track)" DragEnter="() => OnDragEnter(track)" DragLeave="(args) => OnDragLeave(args, track)" DragOver="() => OnDragOver(track)" Drop="() => OnDrop(track)" Border="track == dragOverTrack ? Border.Is0.OnTop.Is4.Warning : null">
		[....]
		</TableRow>
	</TableBody>
</Table>

Boolean tableRizable = true;
Track? draggedTrack;
Track? dragOverTrack;

void OnDragStart(Track track)
{
    _logger.LogDebug("OnDragStart: {0}", track.Position);
    draggedTrack = track;
    tableRizable = false;
}

void OnDrop(Track track)
{
    //TODO: verschieben der tracks!
    _logger.LogDebug("OnDrop: {0}", track.Position);
    draggedTrack = null;
    dragOverTrack = null;
    tableRizable = true;
}

void OnDragEnter(Track track)
{
    _logger.LogDebug("OnDragEnter: {0}", track.Position);
    dragOverTrack = track;
}

void OnDragOver(Track track)
{
    _logger.LogDebug("OnDragOver: {0}", track.Position);
    dragOverTrack = track;
}

async Task OnDragLeave(DragEventArgs args, Track track)
{
    _logger.LogDebug("OnDragLeave: {0}", track.Position);
    var elementId = GetRowElementId(track);
    var rect = await _baseComponentManager.GetBoundingClientRectAsync(elementId);
    _logger.LogDebug("rect.Left: {rect.Left}, rect.Right: {rect.Right}, rect.Top: {rect.Top}, rect.Bottom: {rect.Bottom}", rect.Left, rect.Right, rect.Top, rect.Bottom);
    _logger.LogDebug("args.ClientX: {args.ClientX}, args.ClientY: {args.ClientY}", args.ClientX, args.ClientY);
    if (rect != null &&
        args.ClientX >= rect.Left &&
        args.ClientX <= rect.Right &&
        args.ClientY >= rect.Top &&
        args.ClientY <= rect.Bottom)
    {
        _logger.LogDebug("Mouse is still inside the row.");
        return;
    }
    if (track == dragOverTrack)
    {
        _logger.LogDebug("track == dragOverTrack");
        dragOverTrack = null;
    }
}

Basically the drag n drop works, but setting and unsetting the table resizable leads to strange behaviour. Unsetting it results in my drag beeing stopped because the component gets rerendered. Setting it back after the drop doesn't reset the resizing to be able at all columns. Is there a way to allow dragging a row above all borders even if they are resizable?

[stsrki]

I assume this "weird behavior" happens because of how Blazor rendering works. When each of the events is triggered, in turn it will also rerender current view. On each of those rerenders the Resizable="tableRizable" will be passed down to the Table. And there is a problem, the Resizable is always going to be one cycle behind.

I don't think there is an easy solution. If any. Only one I can think of is to use vanilla JS for reordering rows. That way, you will workaround the Blazor rendering.

[NeoCoderMatrix86]

Ok, thanks for the response. I already thought of something like this. I will have a look to have the reordering of rows done with plain vanilla JS and see if there is a solution. Thanks anyway :).