Drag and Drop table rows from one table to another

I am trying to implement a drag and drop function in my razor page. The razor page looks like this:

@inject NavigationManager navigationManager@using System.Net.Http.Json@inject TestApi2 testApi2@inject TestApi testApi<PageTitle>Test</PageTitle><div class="container"><div class="header">        Teststellung</div><div class="content"><div class="column"><div class="column"><table id="table2" @ondrop="OnDrop" @ondragover="AllowDrop"><thead><tr><th>Nr</th><th>Name</th></tr></thead><tbody>                        @if (droppedClass.Count() == 0)                        {                            for (int i = 0; i <= 1; i++)                            {<tr class="red-row"><td>&nbsp;</td><td>&nbsp;</td></tr>                            }                        }                        else                        {                            foreach (var class in droppedClass)                            {<tr class="red-row"><td>@class.Nr</td><td>@class.Name</td></tr>                            }                        }</tbody></table></div><div class="column"><div class="test-plan-table"><table id="table1"><thead><tr><th>Nr</th><th>Name</th></tr></thead><tbody><!-- Example red rows -->                            @foreach (var class in draggedClass)                            {<tr class="red-row list-item" @ondragstart="@((e) => OnDragStart(e, test))" draggable="true"><td>@class.Nr</td><td>@class.Name</td></tr>                            }</tbody></table></div></div></div></div></div>@code {    private ICollection<Class1> draggedClass = new List<Class1>();    private ICollection<Class1> droppedClass = new List<Class1>();    private ICollection<Class2> mainClass = new List<Class2> { };    public bool isModalVisible;    private Class1 draggedItem = new Class1();    // Start dragging    private void OnDragStart(DragEventArgs e, Class1 item)    {        draggedItem = item;        e.DataTransfer.EffectAllowed = "move";    }    // Allow drop on target    private void AllowDrop(DragEventArgs e)    {        e.DataTransfer.DropEffect = "move";    }    // Handle drop event    private void OnDrop(DragEventArgs e)    {        if (draggedItem != null)        {            draggedClass.Remove(draggedItem);            droppedClass.Add(draggedItem);            draggedItem = null;            StateHasChanged(); // Trigger UI update        }    }    protected override async Task OnInitializedAsync()    {        mainClass = await testApi2.GetItems();        draggedClass = await testApi.GetItems();    }}

In the example the table row should be draggable from the table with the id "table1" to the table with the id "table2".

I tried this approach, but it won't work. I also tried to make the table row as an additional razor page and then approach it as an dragged object, but didn't work