简体   繁体   中英

.NET MAUI Blazor App Drag and Drop impossible

I`m developing a .NET MAUI Blazor App and use mudblazor (awesome and highly recommended). With mudblazor it was easy to create drop zones for drag and drop actions, but when i was running the result was that the app was unable to drag and drop at all.

在此处输入图像描述

razor:

<div draggable="true">
<div class="html5">HTML5</div>
</div>
<MudDropContainer T="DropItem" Items="_items" ItemsSelector="@((item,dropzone) => item.Identifier == dropzone)" ItemDropped="ItemUpdated" Class="d-flex flex-wrap flex-grow-1">
    <ChildContent>
        <MudDropZone T="DropItem" Identifier="Drop Zone 1" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4">Drop Zone 1</MudText>
        </MudDropZone>
        <MudDropZone T="DropItem" Identifier="Drop Zone 2" Class="rounded mud-background-gray pa-6 ma-8 flex-grow-1">
            <MudText Typo="Typo.h6" Class="mb-4">Drop Zone 2</MudText>
        </MudDropZone>
    </ChildContent>
    <ItemRenderer>
        <MudPaper Elevation="25" Class="pa-4 my-4">@context.Name</MudPaper>
    </ItemRenderer>
</MudDropContainer>


@code {
private void ItemUpdated(MudItemDropInfo<DropItem> dropItem)
{
    dropItem.Item.Identifier = dropItem.DropzoneIdentifier;
}

private List<DropItem> _items = new()
{
    new DropItem(){ Name = "Drag me!", Identifier = "Drop Zone 1" },
    new DropItem(){ Name = "Or me!", Identifier = "Drop Zone 2" },
    new DropItem(){ Name = "Just Mud", Identifier = "Drop Zone 1" },
};

public class DropItem
{
    public string Name { get; init; }
    public string Identifier { get; set; }
}
}

razor css:

.html5
{
user-select: none;
width: 25%;
min-height: 6.5em;
margin: 1rem 0 0 1rem;
background-color: green;
color:white;
border-radius: 0.75em;
padding:4%;
touch-action:none;
}

as shown in the image i also tried a very low handmade test object but nothing.

I've ran into the same problem and it seems like it's a known issue. Here's a link to it on GitHub . I'm not aware of any workarounds sadly.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM