英文:
Drag and Drop Copy Item
问题
我创建了一个可将列表从“Exist”状态拖动到“Assign”状态的DragAndDrop组件。我希望被放置的项目被复制到放置区域,而不是从它们的源中删除。
英文:
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.
答案1
得分: 0
然后,不要更新已丢弃物品的状态,而是创建其副本并设置新的状态:
public async Task UpdateGroupsAsync(GroupsStatuses newStatus)
{
var groupdate = new Groupdate
{
Status = newStatus,
LastUpdated = DateTime.Now,
//从 Payload 对象中复制数值,例如
//Description = Payload.Description
};
Groups.Add(groupdate);
await OnStatusUpdated.InvokeAsync(groupdate);
}
英文:
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);
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论