拖放复制项目

huangapple go评论128阅读模式
英文:

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

huangapple
  • 本文由 发表于 2023年3月9日 19:03:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/75683712.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定