Blazor drag and drop how to get target object?

I can't seem to figure out the right way to get the target object. Here is the code front end code that is supposed to have drag and drop functionality:

	<div class="pos-top">
		<div id="imgGrid" class="grid bg-white" style="grid-template-columns:repeat(@columnCount, @(unitWidth)); grid-auto-flow:dense;">
			@foreach (var b in blocks)
			{
				@if ((b.Placement[_pageType].Visible == true || showHiddenBlocks == true) && b.Zones != null && b.Zones.Contains(zone))
				{
					var id = b.Id;
					<div class="col-span-@b.ColSpan row-span-@b.RowSpan relative border border-black box-border @(b.isDragOver?"dropped":"")" style=" order:@b.Placement[_pageType].Order;" @ondblclick="(() => ChangeBlockProperties(b))"
			 draggable="true"
			 data-block-id="@b.Id"
			 id="@id" @ondrop="@((e) => ondropOver(b, blocks.ToList()))"
			 ondragover="event.preventDefault();"
			 @ondragstart="@((e) => ondragstart(e, b, blocks.ToList()))"
			 @ondragenter="@(() => ondragenter(b))"
			 @ondragleave="@(() => { b.isDragOver = false; })"
			 @ondragend="@(() => ondragend(b, blocks.ToList()))">
						<div class="blockNumberInfo absolute rounded-full bg-red-700 flex justify-center items-center border-2 border-black"
				 style="width:40px;height:20px">
							@b.LocalIndex / @b.Placement[_pageType].Order
						</div>


								</div>
							}
						}
					</div>
				}
			}
		</div>

This is my code that is moving the blocks around:

public async void ondropOver(FlyerBlock item, List<FlyerBlock> flyerBlocks)
	{
		DragEnter = null;
		if (DraggedItem == null) return;
		if (DraggedItem == item) return;
		DraggedItem.Placement[_pageType].Order = item.Placement[_pageType].Order;
		await BlockplacementEditService.SaveBlockChangesAsync(flyerBlocks, DraggedItem, DraggedItem.Placement[_pageType].Order, _pageType, zone);
		DraggedItem = null;
		item.isDragOver = false;
		//StateHasChanged();
	}

	public void ondragstart(DragEventArgs e, FlyerBlock item, List<FlyerBlock> flyerBlocks)
	{
		e.DataTransfer.EffectAllowed = "move";
		DraggedItem = item;
		DraggedItemPosition = item.Placement[_pageType].Order;
	}

	public void ondragenter(FlyerBlock item)
	{
		item.isDragOver = true;
		DragEnter = item;
	}

	public async void ondragend(FlyerBlock item, List<FlyerBlock> flyerBlocks)
	{
		item.isDragOver = false;
		if (DraggedItem == null) return;
		DragEnter = null;
		// item.isDragOver = true;

	}

The issue I am running into is that I dont know how to pass the targetblock into my drop over event. I tried using DragEventArgs but that does not work I have also tried using jsruntime but I can only extract the dragged block. I want to be able to get the target block so I can update the order correctly. Any help would be appreciated!

This is my modified drag and drop service. I added the Target property to the DragAndDropService.cs class to hold the target object when dropping.

The original source code can be found here: https://www.radzen.com/blog/blazor-drag-and-drop/

using System;

namespace MyToolSource.Data
{
    public class DragAndDropService
    {
        public object Data { get; set; }
        public object Target { get; set; }
        public string Zone { get; set; }

        public void StartDrag(object data, object target, string zone)
        {
            this.Data = data;
            this.Target = target;
            this.Zone = zone;
        }

        public bool Accepts(string zone)
        {
            return this.Zone == zone;
        }
    }
}

This is the Draggable.cs class.
I added the Target property to hold the target object. Although you don't have the target object at this point it must have the property that will be populated when you use the DropTarget later in the html.

@typeparam T
@using MyToolSource.Data
@inject DragAndDropService DragAndDropService

<div draggable="true" @ondragstart="@OnDragStart">
    @ChildContent
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Zone { get; set; }

    [Parameter]
    public T Target { get; set; }

    [Parameter]
    public T Data { get; set; }

    void OnDragStart()
    {
        // Notify the DragAndDropService what the current Data and Zone are.
        DragAndDropService.StartDrag(Data, Target, Zone);
    }
}

This is the DropTrget.cs class. I added the Target property to hold the target object once the source is dropped.

@using MyToolSource.Data
@inject DragAndDropService DragAndDropService
@typeparam T

<div ondragover="event.preventDefault()" @ondrop="@OnDrop">
    @ChildContent
</div>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    [Parameter]
    public string Zone { get; set; }

    [Parameter]
    public T Target { get; set; }

    [Parameter]
    public Action<T,T>? Drop { get; set; }

    void OnDrop()
    {
        if (Drop != null && DragAndDropService.Accepts(Zone))
        {
            Drop((T)DragAndDropService.Data, Target) ;
        }
    }
}

In the HTML add the Target=@customer to the DropTarget wrapper.

<Draggable Data="@customer" >
    <td class="draggable customer-x">
       @customer.FirstName
    </td>
</Draggable> 

       
<DropTarget T="vCustomer" Drop="@OnDrop" Target=@customer >
    <td id="@customer.CustomerId" ></td>
</DropTarget>

The OnDrop method. Now that you have the target object you can use it.

string dropMessage = null;

void OnDrop(vCustomer data, object target)
{
    dropMessage = $"Dropped: {data.FirstName} on {((vCustomer)target).FirstName}";

    // Important: Invoke StateHasChanged() to update the page
    StateHasChanged();
}

Hope this helps!