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);
}