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!