CODEWITHSUNDEEP
c#.netblazormauimaui-blazor
T0bi
T0bi

Reputation: 371

.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.

enter image description here

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.

Upvotes: 3

Views: 2505

Answers (1)

Karl Lukan
Karl Lukan

Reputation: 33

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.

Upvotes: 2

Related Questions