Drag and Drop Copy Item

I created a DragAndDrop component that can drag lists from Exist status to Assign status. I want dropped items to be copied to the dropzone and not removed from their source.

DragAndDrop.razor

<DragAndDropContainer Groups="Groups" OnStatusUpdated="HandleStatusUpdated">
    <div class="col-md-6 box-1">
        <RadzenCard class="m-1">
            <p class="text mb-1">Existierenden Gruppen</p>
            <DragAndDropList ListStatus="GroupsStatuses.Exist" AllowedStatuses="@(new GroupsStatuses[] { GroupsStatuses.Assign})" />
         </RadzenCard>
    </div>
    <div class="col-md-6 box-1">
        <RadzenCard class="m-1">
            <p class="text mb-1">Zugewiesene Gruppen</p>
            <DragAndDropList ListStatus="GroupsStatuses.Assign" AllowedStatuses="@(new GroupsStatuses[] { GroupsStatuses.Exist})" />
         </RadzenCard>
    </div>
</DragAndDropContainer>

DragAndDropList.razor

    <div class="dragdrop-status">
    <h4>@ListStatus (@Groups.Count())</h4>

    <ul class="dropzone @dropClass"
        ondragover="event.preventDefault();"
        ondragstart="event.dataTransfer.setData('', event.target.id);"
        @ondrop="HandleDrop"
        @ondragenter="HandleDragEnter"
        @ondragleave="HandleDragLeave">

        @foreach (var group in Groups)
        {
            <DragAndDropElement Groupdate="group" />
        }

    </ul>
</div>
 

@code {

   
    [CascadingParameter] DragAndDropContainer Container { get; set; }
    [Parameter] public GroupsStatuses ListStatus { get; set; }
    [Parameter] public GroupsStatuses[] AllowedStatuses { get; set; }

    List<Groupdate> Groups = new List<Groupdate>();
    string dropClass = "";
    
    protected override void OnParametersSet()
    {
        Groups.Clear();
        Groups.AddRange(Container.Groups.Where(x => x.Status == ListStatus));
    }

    private void HandleDragEnter()
{
        if (ListStatus == Container.Payload.Status) return;

        if (AllowedStatuses != null && !AllowedStatuses.Contains(Container.Payload.Status))
        {
            dropClass = "no-drop";
        }
        else
        {
            dropClass = "can-drop";
        }
    }

    private void HandleDragLeave()
    {
        dropClass = "";
    }

    private async Task HandleDrop()
    {
        dropClass = "";

        if (AllowedStatuses != null && !AllowedStatuses.Contains(Container.Payload.Status)) return;

        await Container.UpdateGroupsAsync(ListStatus);
    }
}

DragAndDropContainer.razor.cs

    [Parameter] public List<Groupdate> Groups { get; set; }
    [Parameter] public RenderFragment ChildContent { get; set; }
    [Parameter] public EventCallback<Groupdate> OnStatusUpdated { get; set; }
    //[Parameter] public IList<Groupdate>? selectedGroupdate { get; set; }

    public Groupdate Payload { get; set; }

    public async Task UpdateGroupsAsync(GroupsStatuses newStatus)
    {
        var task = Groups.SingleOrDefault(x => x.GrID == Payload.GrID);

        if (task != null)
        {
            task.Status = newStatus;
            task.LastUpdated = DateTime.Now;
            await OnStatusUpdated.InvokeAsync(Payload);
        }
    }

I want dropped items to be copied to the dropzone and not removed from their source.

>Solution :

Then instead of updating the status of the dropped item, create a copy of it and set the new status:

public async Task UpdateGroupsAsync(GroupsStatuses newStatus)
{
    var groupdate = new Groupdate
    {
        Status = newStatus,
        LastUpdated = DateTime.Now,
        //copy values from Payload object e.g.
        //Description = Payload.Description
    };

    Groups.Add(groupdate);

    await OnStatusUpdated.InvokeAsync(groupdate);
}